<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>var __ez=__ez||{};__ez.stms=Date.now();__ez.evt={};__ez.script={};__ez.ck=__ez.ck||{};__ez.template={};__ez.template.isOrig=false;__ez.queue=function(){var e=0,i=0,t=[],n=!1,o=[],r=[],s=!0,a=function(e,i,n,o,r,s,a){var l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,d=this;this.name=e,this.funcName=i,this.parameters=null===n?null:p(n)?n:[n],this.isBlock=o,this.blockedBy=r,this.deleteWhenComplete=s,this.isError=!1,this.isComplete=!1,this.isInitialized=!1,this.proceedIfError=a,this.fWindow=l,this.isTimeDelay=!1,this.process=function(){f("... func = "+e),d.isInitialized=!0,d.isComplete=!0,f("... func.apply: "+e);var i=d.funcName.split("."),n=null,o=this.fWindow||window;i.length>3||(n=3===i.length?o[i[0]][i[1]][i[2]]:2===i.length?o[i[0]][i[1]]:o[d.funcName]),null!=n&&n.apply(null,this.parameters),!0===d.deleteWhenComplete&&delete t[e],!0===d.isBlock&&(f("----- F'D: "+d.name),u())}},l=function(e,i,t,n,o,r,s){var a=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,l=this;this.name=e,this.path=i,this.async=o,this.defer=r,this.isBlock=t,this.blockedBy=n,this.isInitialized=!1,this.isError=!1,this.isComplete=!1,this.proceedIfError=s,this.fWindow=a,this.isTimeDelay=!1,this.isPath=function(e){return"/"===e[0]&&"/"!==e[1]},this.getSrc=function(e){return void 0!==window.__ezScriptHost&&this.isPath(e)&&"banger.js"!==this.name?window.__ezScriptHost+e:e},this.process=function(){l.isInitialized=!0,f("... file = "+e);var i=this.fWindow?this.fWindow.document:document,t=i.createElement("script");t.src=this.getSrc(this.path),!0===o?t.async=!0:!0===r&&(t.defer=!0),t.onerror=function(){var e={url:window.location.href,name:l.name,path:l.path,user_agent:window.navigator.userAgent};"undefined"!=typeof _ezaq&&(e.pageview_id=_ezaq.page_view_id);var i=encodeURIComponent(JSON.stringify(e)),t=new XMLHttpRequest;t.open("GET","//g.ezoic.net/ezqlog?d="+i,!0),t.send(),f("----- ERR'D: "+l.name),l.isError=!0,!0===l.isBlock&&u()},t.onreadystatechange=t.onload=function(){var e=t.readyState;f("----- F'D: "+l.name),e&&!/loaded|complete/.test(e)||(l.isComplete=!0,!0===l.isBlock&&u())},i.getElementsByTagName("head")[0].appendChild(t)}},d=function(e,i){this.name=e,this.path="",this.async=!1,this.defer=!1,this.isBlock=!1,this.blockedBy=[],this.isInitialized=!0,this.isError=!1,this.isComplete=i,this.proceedIfError=!1,this.isTimeDelay=!1,this.process=function(){}};function c(e){!0!==h(e)&&0!=s&&e.process()}function h(e){if(!0===e.isTimeDelay&&!1===n)return f(e.name+" blocked = TIME DELAY!"),!0;if(p(e.blockedBy))for(var i=0;i<e.blockedBy.length;i++){var o=e.blockedBy[i];if(!1===t.hasOwnProperty(o))return f(e.name+" blocked = "+o),!0;if(!0===e.proceedIfError&&!0===t[o].isError)return!1;if(!1===t[o].isComplete)return f(e.name+" blocked = "+o),!0}return!1}function f(e){var i=window.location.href,t=new RegExp("[?&]ezq=([^&#]*)","i").exec(i);"1"===(t?t[1]:null)&&console.debug(e)}function u(){++e>200||(f("let's go"),m(o),m(r))}function m(e){for(var i in e)if(!1!==e.hasOwnProperty(i)){var t=e[i];!0===t.isComplete||h(t)||!0===t.isInitialized||!0===t.isError?!0===t.isError?f(t.name+": error"):!0===t.isComplete?f(t.name+": complete already"):!0===t.isInitialized&&f(t.name+": initialized already"):t.process()}}function p(e){return"[object Array]"==Object.prototype.toString.call(e)}return window.addEventListener("load",(function(){setTimeout((function(){n=!0,f("TDELAY -----"),u()}),5e3)}),!1),{addFile:function(e,i,n,s,a,d,h,f,u){var m=new l(e,i,n,s,a,d,h,u);!0===f?o[e]=m:r[e]=m,t[e]=m,c(m)},addDelayFile:function(e,i){var n=new l(e,i,!1,[],!1,!1,!0);n.isTimeDelay=!0,f(e+" ...  FILE! TDELAY"),r[e]=n,t[e]=n,c(n)},addFunc:function(e,n,s,l,d,h,f,u,m,p){!0===h&&(e=e+"_"+i++);var w=new a(e,n,s,l,d,f,u,p);!0===m?o[e]=w:r[e]=w,t[e]=w,c(w)},addDelayFunc:function(e,i,n){var o=new a(e,i,n,!1,[],!0,!0);o.isTimeDelay=!0,f(e+" ...  FUNCTION! TDELAY"),r[e]=o,t[e]=o,c(o)},items:t,processAll:u,setallowLoad:function(e){s=e},markLoaded:function(e){if(e&&0!==e.length){if(e in t){var i=t[e];!0===i.isComplete?f(i.name+" "+e+": error loaded duplicate"):(i.isComplete=!0,i.isInitialized=!0)}else t[e]=new d(e,!0);f("markLoaded dummyfile: "+t[e].name)}},logWhatsBlocked:function(){for(var e in t)!1!==t.hasOwnProperty(e)&&h(t[e])}}}();__ez.evt.add=function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n()},__ez.evt.remove=function(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):delete e["on"+t]};__ez.script.add=function(e){var t=document.createElement("script");t.src=e,t.async=!0,t.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(t)};__ez.dot={};__ez.queue.addFile('/detroitchicago/boise.js', '/detroitchicago/boise.js?gcb=195-2&cb=2', true, [], true, false, true, false);__ez.queue.addFile('/parsonsmaize/abilene.js', '/parsonsmaize/abilene.js?gcb=195-2&cb=28', true, [], true, false, true, false);</script>
<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({}, typeof window._ezaq !== "undefined" ? window._ezaq : {}, {"ad_cache_level":1,"domain_id":173770,"ezcache_level":2,"ezcache_skip_code":0,"has_bad_image":0,"has_bad_words":0,"is_sitespeed":0,"lt_cache_level":0,"page_view_id":"68e75c50-975a-46fd-4f49-7287c3864f9d","response_size_orig":175811,"response_time_orig":5,"template_id":134,"url":"https://plantuml.com/zh-dark/class-diagram","word_count":3311,"worst_bad_word_level":0});__ez.queue.markLoaded('ezaqBaseReady');</script>
<script type="text/javascript">(function(){function storageAvailable(type){var storage;try{storage=window[type];var x='__storage_test__';storage.setItem(x,x);storage.removeItem(x);return true;}
catch(e){return e instanceof DOMException&&(e.code===22||e.code===1014||e.name==='QuotaExceededError'||e.name==='NS_ERROR_DOM_QUOTA_REACHED')&&(storage&&storage.length!==0);}}
function remove_ama_config(){if(storageAvailable('localStorage')){localStorage.removeItem("google_ama_config");}}
remove_ama_config()})()</script>
<script type="text/javascript">var ezoicTestActive = true</script>
<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({}, typeof window._ezaq !== "undefined" ? window._ezaq : {}, {"ab_test_id":"mod174-c","ad_cache_level":1,"ad_count_adjustment":0,"ad_lazyload_version":0,"ad_load_version":1,"ad_location_ids":"","adx_ad_count":0,"ai_placeholder_cache_level":1,"ai_placeholder_placement_cnt":-1,"bidder_method":1,"bidder_version":3,"city":"Krasnoyarsk","country":"RU","days_since_last_visit":-1,"display_ad_count":0,"domain_id":173770,"domain_test_group":20230802,"ds_adsize_opt_id":-1,"engaged_time_visit":0,"ezcache_level":2,"ezcache_skip_code":0,"form_factor_id":1,"framework_id":1,"has_bad_image":0,"has_bad_words":0,"iab_category":"","iab_category_0":"596","is_embed":false,"is_from_recommended_pages":false,"is_return_visitor":false,"is_sitespeed":0,"last_page_load":"","last_pageview_id":"","lt_cache_level":0,"max_ads":0,"metro_code":0,"optimization_version":1,"page_ad_positions":"","page_view_count":1135,"page_view_id":"68e75c50-975a-46fd-4f49-7287c3864f9d","position_selection_id":0,"postal_code":"660000","pv_event_count":0,"response_size_orig":175811,"response_time_orig":5,"serverid":"i-0390a7d5a2eea4a99","state":"KYA","sub_page_ad_positions":"","t_epoch":1697691219,"template_id":134,"time_on_site_visit":0,"url":"https://plantuml.com/zh-dark/class-diagram","word_count":3311,"worst_bad_word_level":0});__ez.queue.markLoaded('ezaqReady');</script>
<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>__ez.queue.addFile('/parsonsmaize/mulvane.js', '/parsonsmaize/mulvane.js?gcb=195-2&cb=5', true, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/parsonsmaize/olathe.js', '/parsonsmaize/olathe.js?gcb=195-2&cb=20', false, ['/parsonsmaize/abilene.js','/parsonsmaize/mulvane.js'], true, false, true, false);__ez.queue.addFile('/porpoiseant/et.js', '/porpoiseant/et.js?gcb=195-2&cb=2', false, [], true, false, true, false);!function(){var e;__ez.vep=(e=[],{Add:function(i,t){__ez.dot.isDefined(i)&&__ez.dot.isValid(t)&&e.push({type:"video",video_impression_id:i,domain_id:__ez.dot.getDID(),t_epoch:__ez.dot.getEpoch(0),data:__ez.dot.dataToStr(t)})},Fire:function(){if(void 0===document.visibilityState||"prerender"!==document.visibilityState){if(__ez.dot.isDefined(e)&&e.length>0)for(;e.length>0;){var i=5;i>e.length&&(i=e.length);var t=e.splice(0,i),o=__ez.dot.getURL("/detroitchicago/grapefruit.gif")+"?orig="+(!0===__ez.template.isOrig?1:0)+"&v="+btoa(JSON.stringify(t));__ez.dot.Fire(o)}e=[]}}})}();</script><script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>!function(){function e(i){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(i)}__ez.pel=function(){var i=[];function t(t,o,d,_,n,r,a,s){if(__ez.dot.isDefined(t)&&0!=__ez.dot.isAnyDefined(t.getSlotElementId,t.ElementId)){void 0===s&&(s=!1);var p=parseInt(__ez.dot.getTargeting(t,"ap")),f=__ez.dot.getSlotIID(t),u=__ez.dot.getAdUnit(t,s),z=parseInt(__ez.dot.getTargeting(t,"compid")),g=0,c=0,l=function(i){if("undefined"==typeof _ezim_d)return!1;var t=__ez.dot.getAdUnitPath(i).split("/").pop();if("object"===("undefined"==typeof _ezim_d?"undefined":e(_ezim_d))&&_ezim_d.hasOwnProperty(t))return _ezim_d[t];for(var o in _ezim_d)if(o.split("/").pop()===t)return _ezim_d[o];return!1}(t);"object"==e(l)&&(void 0!==l.creative_id&&(c=l.creative_id),void 0!==l.line_item_id&&(g=l.line_item_id)),__ez.dot.isDefined(f,u)&&__ez.dot.isValid(o)&&("0"===f&&!0!==s||""===u||i.push({type:"impression",impression_id:f,domain_id:__ez.dot.getDID(),unit:u,t_epoch:__ez.dot.getEpoch(0),revenue:d,est_revenue:_,ad_position:p,ad_size:"",bid_floor_filled:n,bid_floor_prev:r,stat_source_id:a,country_code:__ez.dot.getCC(),pageview_id:__ez.dot.getPageviewId(),comp_id:z,line_item_id:g,creative_id:c,data:__ez.dot.dataToStr(o),is_orig:s||__ez.template.isOrig}))}}function o(){void 0!==document.visibilityState&&"prerender"===document.visibilityState||(__ez.dot.isDefined(i)&&i.length>0&&[i.filter((function(e){return e.is_orig})),i.filter((function(e){return!e.is_orig}))].forEach((function(e){for(;e.length>0;){var i=e[0].is_orig||!1,t=5;t>e.length&&(t=e.length);var o=e.splice(0,t),d=__ez.dot.getURL("/porpoiseant/army.gif")+"?orig="+(!0===i?1:0)+"&sts="+btoa(JSON.stringify(o));(void 0!==window.isAmp&&isAmp||void 0!==window.ezWp&&ezWp)&&void 0!==window._ezaq&&_ezaq.hasOwnProperty("domain_id")&&(d+="&visit_uuid="+_ezaq.visit_uuid),__ez.dot.Fire(d)}})),i=[])}return{Add:t,AddAndFire:function(e,i){t(e,i,0,0,0,0,0),o()},AddAndFireOrig:function(e,i){t(e,i,0,0,0,0,0,!0),o()},AddById:function(e,t,o,d){var _=e.split("/");if(__ez.dot.isDefined(e)&&3===_.length&&__ez.dot.isValid(t)){var n=_[0],r={type:"impression",impression_id:_[2],domain_id:__ez.dot.getDID(),unit:n,t_epoch:__ez.dot.getEpoch(0),pageview_id:__ez.dot.getPageviewId(),data:__ez.dot.dataToStr(t),is_orig:o||__ez.template.isOrig};void 0!==d&&(r.revenue=d),i.push(r)}},Fire:o,GetPixels:function(){return i}}}()}();__ez.queue.addFile('/detroitchicago/raleigh.js', '/detroitchicago/raleigh.js?gcb=195-2&cb=6', false, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/detroitchicago/vista.js', '/detroitchicago/vista.js?gcb=195-2&cb=5', false, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/detroitchicago/tampa.js', '/detroitchicago/tampa.js?gcb=195-2&cb=5', false, ['/parsonsmaize/abilene.js'], true, false, true, false);</script><base href=""/>
<meta name="flattr:id" content="1ew3x0"/>



<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "https://plantuml.com",
  "name": "PlantUML",
  "sameAs" : ["https://twitter.com/plantuml","https://en.wikipedia.org/wiki/PlantUML","https://www.wikidata.org/wiki/Q18346546"],
  "logo": "https://cdn-0.plantuml.com/logo3.png",
  "contactPoint": [{
    "@type": "ContactPoint",
    "email": "plantuml@gmail.com",
    "url": "https://plantuml.com",
    "contactType": "customer service"
  }]
}
</script>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://plantuml.com",
      "name": "Home"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://plantuml.com/sitemap-language-specification",
      "name": "Language specification"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://plantuml.com/class-diagram",
      "name": "Class Diagram"
  }
  }]
}
</script>
<link rel="canonical" href="../zh/class-diagram.html"/>
<link rel="alternate" hreflang="x-default" href="../class-diagram.html"/>
<link rel="alternate" hreflang="de" href="../de/class-diagram.html"/>
<link rel="alternate" hreflang="en" href="../class-diagram.html"/>
<link rel="alternate" hreflang="es" href="../es/class-diagram.html"/>
<link rel="alternate" hreflang="fr" href="../fr/class-diagram.html"/>
<link rel="alternate" hreflang="ja" href="../ja/class-diagram.html"/>
<link rel="alternate" hreflang="ru" href="../ru/class-diagram.html"/>
<link rel="alternate" hreflang="ko" href="../ko/class-diagram.html"/>
<link rel="alternate" hreflang="zh" href="../zh/class-diagram.html"/>

<link rel="shortcut icon" href="../favicon.ico"/>

<link rel="preload" as="image" href="../svgrepo-house.svg"/>
<link rel="preload" as="image" href="../svgrepo-text-news.svg"/>
<link rel="preload" as="image" href="../svgrepo-rocket-3-start.svg"/>
<link rel="preload" as="image" href="../svgrepo-server.svg"/>
<link rel="preload" as="image" href="../svgrepo-play.svg"/>
<link rel="preload" as="image" href="../svgrepo-forum.svg"/>
<link rel="preload" as="image" href="../svgrepo-add-to-online-cart.svg"/>
<link rel="preload" as="image" href="../svgrepo-forum-message.svg"/>
<link rel="preload" as="image" href="../svgrepo-palette-fill.svg"/>
<link rel="preload" as="image" href="../svgrepo-cpu.svg"/>
<link rel="preload" as="image" href="../svgrepo-books-library.svg"/>
<link rel="preload" as="image" href="../svgrepo-signpost-fill.svg"/>
<link rel="preload" as="image" href="../svgrepo-library.svg"/>

<link rel="preload" as="image" href="../flags21.png"/>

<link rel="preload" as="image" href="../svgrepo-uxwing-dark-mode-toggle.svg"/>


<!-- link rel="preload" as="image" href="https://img.shields.io/liberapay/patrons/plantuml.svg?logo=liberapay" -->


<title>类图的语法和功能</title>
<meta name="description" content="PlantUML类图的语法：您可以定义接口，成员关系，包，泛型，注释...也可以改变字体和颜色。"/>

<meta property="og:type" content="article"/>
<meta property="og:title" content="类图的语法和功能"/>
<meta property="og:description" content="PlantUML类图的语法：您可以定义接口，成员关系，包，泛型，注释...改变字体和颜色也有可能。"/>

<meta property="og:url" content="https://plantuml.com/zh/class-diagram"/>
<meta property="og:site_name" content="PlantUML.com"/>

<!-- meta property="og:image" content="https://plantuml.com/og-class-diagram" -->
<meta name="twitter:image" content="https://plantuml.com/og-class-diagram"/>
<meta property="og:locale" content="zh"/>

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="类图的语法和功能"/>
<meta name="twitter:description" content="PlantUML类图的语法：您可以定义接口，成员关系，包，泛型，注释...改变字体和颜色也有可能。"/>
<meta name="twitter:site" content="@PlantUML"/>
<meta name="twitter:creator" content="@PlantUML"/>





<!-- https://www.w3schools.com/colors/colors_picker.asp -->
<!-- filter css https://codepen.io/sosuke/pen/Pjoqqp -->














<style>
.scale {
}

li {
	margin: 2px;
}
#external li {
	margin: 13px;
}

.pezoic {
  max-width:970px;
}

@media screen and (max-width: 1600px) {
	.pezoic {
	  max-width:768px;
	}
}

.coptable {
	max-width: 90%;
}

.mytab {
	display:inline-block;
	border-radius: 3px;
	border: 1px solid #e1e4e8;
}

.mytab:hover {
	border: 1px dashed #8CB4FF;
	cursor: pointer;
	color: #8CB4FF;
	background: #111111;
}

.cop {
	margin: 25px 10px 0 10px;
	filter: invert(100%);
}
.cop:hover {
	cursor: pointer; 
filter: invert(59%) sepia(81%) saturate(1778%) hue-rotate(164deg) brightness(105%) contrast(103%);
}
.cop2 {
	margin: 25px 10px 0 10px;
}
.cop2:hover {
	cursor: pointer; 
}
.msg {
	position: absolute;
	color:#339966;
	background-color: #FFF;
	margin-top: 55px;
	display:none;
	border-radius: 3px;
	border: 1px solid #4dff00;
}

.mycell0 {
	float: left;
	vertical-align : top;
	padding:10px;
}
.mycell0 code:hover {
	cursor: default; 
	color: #fff;
}

.mycell {
	float: right;
	vertical-align : top;
	padding:10px;
	max-width: 55vw;
	overflow-x: auto;
}

.mycell0 pre {
	max-width: 55vw;
	overflow-x: auto;
}

.cod {
	background: #222222;
	padding: 2px 5px;
	border-radius: 3px;
}
.colo {
	display: inline-block;
	background: #222222;
	padding: 7px 12px;
	border-radius: 3px;
}
.tag,.tagg,.tago,.tagr {
	text-rendering: optimizeLegibility;
	display: inline-block;
	padding: 3px 5px 2px 4px;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid #999;
	text-transform: uppercase;
	text-align: center;
	border-radius: 3px;
	font-size: 11px;
	font-weight: bold;
	line-height: 90%;
}
.tag {
	background-color: #EEEEEE;
}
.tagg {
	background-color: #98FB98;
}
.tago {
	background-color: #fafa00;
}
.tagr {
	background-color: #FF4500;
}


a {
    text-decoration:none;
    color:#8CB4FF;
}
a:hover {
    text-decoration:underline;
}

.menu1 {
    border: 0;
    font-family: Helvetica,sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
	vertical-align: middle;
	line-height: 30px;
}
.menu1 a{
    /*background: #FF0;*/
    text-align:center;
	padding:10px 7px 10px 7px;
    text-decoration:none;
    color:#b0c0d0;
}
.menu1 a:hover{
    color:#8CB4FF;
}
#menu0 {
    top:0;
    z-index: 4;
    margin:0 0 0 10px;
    padding:0;
}

@media screen and (max-width: 1200px) {
	#menu0 {
	visibility: hidden;
	}	
}

.mhov img {
	margin: 0 5px 0 0;
	padding: 0;
}
.mhov:hover {
filter: invert(59%) sepia(81%) saturate(1778%) hue-rotate(164deg) brightness(105%) contrast(103%);
}

#menuside2 {
    border:0;
    font-family:Helvetica,sans-serif;
    font-size:14px;
    padding:20px 0 4px 0;
    margin:0
}
#menuside2 span {
    vertical-align: top;
}
#menuside2 li{
    list-style:none;
    position:relative;
    padding:0;
	margin:10px 20px 10px 10px;
    border:0;
}
#menuside2 li a{
	display: inline-block;
    text-decoration:none;
    color:#b0c0d0;
    width:100%;
}
#menuside2 img {
filter: invert(46%) sepia(13%) saturate(620%) hue-rotate(170deg) brightness(91%) contrast(85%);
}

#BC {
    z-index: 0;
    padding-top: 5px;
    top: 35px;
}

.breadcrumb {
z-index:1;
	font-family:Helvetica,sans-serif;
	font-size:14px;
	text-align: center;
	display: inline-block;
	overflow: hidden;
	border-radius: 5px;
}


.breadcrumb a {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 24px;
	color: #373f49;
	padding: 0 10px 0 35px;
	background: #f0f1f1;
	background: linear-gradient(#f0f1f1, #c6d2d2);
	position: relative;
}
.breadcrumb a:first-child {
	padding-left: 21px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
	left: 14px;
}
.breadcrumb a:last-child {
	visibility: hidden;
}

.breadcrumb a.active, .breadcrumb a:hover{
	color: #0366d6;
	background: #c6d2d2;
	background: linear-gradient(#e3e4e4, #b8c7c7);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
	background: #c6d2d2;
	background: linear-gradient(135deg, #e3e4e4, #b8c7c7);
}

.breadcrumb a:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -12px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb a */
	width: 24px; 
	height: 24px;
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #f0f1f1;
	background: linear-gradient(135deg, #f0f1f1, #c6d2d2);
	/*stylish arrow design using box shadow*/
	box-shadow: 
		2px -2px 0 2px rgba(0,0,0,0.1), 
		3px -3px 0 2px rgba(255,255,255,0.1);
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}

/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
	content: none;
	visibility: hidden;
}


.lga,.lga a,.lgi,.lgi a {
	font-family:Helvetica,sans-serif;
	font-size:13px;
	text-align: center;
    color: #fff;
    padding: 0 5px;
    margin: 0;
}
.lga,.lga a {
    background-color: #008;
}
.lgi,.lgi a {
    background-color: #888;
}
.lga:hover,.lga:hover a {
    text-decoration: none;
    color: #BBB;
}
.lgi:hover,.lgi:hover a {
    text-decoration: none;
    color: #CCC;
}

</style>

<style>
.backtop {
	margin:0px 10px;
	filter: invert(100%);
}
.backtop:hover {
	cursor: pointer;
filter: invert(59%) sepia(81%) saturate(1778%) hue-rotate(164deg) brightness(105%) contrast(103%);
}
</style>




<style>
/* Dropdown Button */
.dropbtn {
  padding: 0px;
  border: none;
  background: none;
  filter: invert(100%);
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content img {
vertical-align:middle;
margin: 0 8px 0 1px;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-size: small;
  font-weight: normal;
  color: black;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: #8CB4FF;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<style>
#flex1 {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	width: 378px;
	height: 100%;
}

#lll {
	flex-grow: 1;
	flex-shrink: 1;
	max-width:162px;
	overflow:hidden;
}

#mmm {
	flex-grow: 0;
	flex-shrink: 0;
	background: #222222;
	width: 210px;
	min-width: 210px;
	max-width: 210px;
	flex-grow: 0;
	flex-shrink: 0;
    border-left: 1px solid #333333;
}

#qqq {
	flex-grow: 0;
	flex-shrink: 0;
	width: 4px;
	min-width: 4px;
	max-width: 4px;
	flex-grow: 0;
	flex-shrink: 0;
}

#rrr {
	flex-grow: 1;
	flex-shrink: 1;
	max-width:162px;
	overflow:hidden;
}

.cde {
	display: flex;
	flex-direction: column;
    justify-content:space-between;
    height: 100%;
}
.cd {
	display: flex;
	flex-direction: column;
    justify-content: space-start;
    height: 100%;
}

.aaa {
	height: 30px;
	min-height: 30px;
	max-height: 30px;
	flex-grow: 0;
	flex-shrink: 0;
	background: #222222;
    border-bottom: 1px solid #333333;
}

.bbb, .bbborder {
	flex-grow: 1;
	flex-shrink: 0;
}

.bbborder {
    border-left: 1px solid #333333;
}


#header {
    z-index: 10;
    position: fixed;
	left: 378px;
	right: 0;
    height: 30px;
    top: 0;
    background: #222222;
    border-bottom: 1px solid #333333;
    
}
#header2 {
    z-index: 7;
    position: fixed;
	left: 378px;
	right: 0;
    height: 10px;
    top: 30px;
    background: #1B1B1B;
}


#left0 {
	top:0;
    position: fixed;
    left: 0;
    margin:0 ;
    bottom: 0;
    width: 378px;
    padding: 0;
    z-index: 2;
    /*background: #F7F;*/
}


#root {
    padding:0;
	margin: 40px 0 0 388px;
    background: #1B1B1B;
}


body {
	margin: auto;
	overflow-x: hidden;
    background: #1B1B1B;
    color: #FFF;
}


@media screen and (max-width: 1190px) {
	#flex1, #left0 {
		width: 215px;
	}
	#root {
		margin: 40px 0 0 224px;
	}
	#header, #header2 {
		left: 215px;
	}
	#left0 {
		left: 0;
	}
	#lll, #rrr {
  		width:0;
		visibility: hidden;
  		flex-grow: 0;
  		flex-shrink: 0;
	}
	
}
@media screen and (max-width: 1010px) {
	#root {
		margin: 0 0 0 216px;
	}
	#header, #header2 {
		display: none;
	}
	#lll, #qqq {
  		width:0;
		visibility: hidden;
  		flex-grow: 0;
  		flex-shrink: 0;
	}
	#mmm {
		    border-right: 1px solid #333333;
	}
	
}

@media screen and (min-width:1700px){
	#header, #header2 {
		left:518px;
	}
	#left0, #flex1{
		width:518px;
	}
	#root{
		margin-left:528px;
	}
	#lll, #rrr {
		max-width:302px;
	}
}


</style>




<script>window.pushMST_config={"vapidPK":"BBodn2vLFoDO5AdCfmOOzNmcUsn52kTA6JNZNYVFymzEdWHonz_bkUcsaTkPXHvNGRkRUSAxMbup-H0l2sb1h_Q","enableOverlay":true,"swPath":"/sw.js","i18n":{}};
  var pushmasterTag = document.createElement('script');
  pushmasterTag.src = "https://cdn.pushmaster-cdn.xyz/scripts/publishers/629f5e297baecc00098a271b/SDK.js";
  pushmasterTag.setAttribute('defer','');

  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(pushmasterTag, firstScriptTag);
</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-TKZNNQT9CZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-TKZNNQT9CZ');
</script>



<script>
var llg = "zh";
var az=0;
var amdark=1;
function ljs(n) {
	if (az) return false;
    var sc = document.createElement("script");
    sc.type = "text/javascript";
    sc.src = "/btn-"+n+".js";
	document.body.innerHTML = "<i style='position:absolute;top:30%;width:100%;'><center>Loading in progress...";
    document.body.appendChild(sc);
}
function ctc(id) {
document.getElementById('img'+id).classList.remove('cop'); document.getElementById('img'+id).classList.add('cop2');
document.getElementById('pre'+id).style.backgroundColor = '#4dff00';
document.getElementById('msg'+id).style.display = 'inline';

setTimeout(function() { document.getElementById('img'+id).classList.remove('cop2'); document.getElementById('img'+id).classList.add('cop'); document.getElementById('pre'+id).style.backgroundColor = ''; document.getElementById('msg'+id).style.display = 'none';}, 800);      


	text = document.getElementById('pre'+id).innerText;
    if (window.clipboardData && window.clipboardData.setData)
        return window.clipboardData.setData("Text", text);
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var ta = document.createElement("textarea");
        ta.textContent = text;
        ta.style.position = "fixed";
        document.body.appendChild(ta);
        ta.select();
        try {
            return document.execCommand("copy");
        }
        catch (ex) {
            return false;
        }
        finally {
            document.body.removeChild(ta);
        }
    }
}
</script>



<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type='text/javascript'>
var ezoTemplate = 'pub_site';
var ezouid = '1';
var ezoFormfactor = '1';
</script><script data-ezscrex="false" type='text/javascript'>
var soc_app_id = '0';
var did = 173770;
var ezdomain = 'plantuml.com';
var ezoicSearchable = 1;
</script>
<script data-ezscrex='false' data-pagespeed-no-defer data-cfasync='false'>
function create_ezolpl() {
	var d = new Date();
	d.setTime(d.getTime() + (365*24*60*60*1000));
	var expires = "expires="+d.toUTCString();
	__ez.ck.setByCat("ezux_lpl_173770=" + new Date().getTime() + "|" + _ezaq.page_view_id + "|" + _ezaq.is_return_visitor + "; " + expires, 3);
}
function attach_ezolpl() {
	if (document.readyState === "complete") {
		create_ezolpl();
		return;
	}
	window.addEventListener("load", create_ezolpl);
}

__ez.queue.addFunc("attach_ezolpl", "attach_ezolpl", null, false, ['/detroitchicago/boise.js'], true, false, false, false);
</script></head>
<body>

<div id="left0">

<div id="flex1">


<div id="lll">

<div class="cde">

<!-- c --><div>
</div>

<!-- d --><div>
<!-- Ezoic - Left0 - sidebar -->
<span id="ezoic-pub-ad-placeholder-131"></span><!-- ezoic_pub_ad_placeholder-131-sidebar-120x600-131-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-131-sidebar-160x600-131-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Left0 - sidebar -->
</div>


<!-- e --><div>
</div>

</div><!-- cde -->


</div><!-- lll -->

<div id="mmm">


<div class="cde">

<!-- c --><div>

<!--menu 10-->
<div>



<!-- Ezoic - Menu2L - sidebar -->
<span id="ezoic-pub-ad-placeholder-105"></span><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-120x240-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-125x125-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-180x150-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-200x200-105-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Menu2L - sidebar -->

</div>

<!-- https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element -->
<!-- https://codepen.io/sosuke/pen/Pjoqqp -->


<ul id="menuside2">
<li><a href="index.html" class="mhov"><img src="../svgrepo-house.svg" width="16" height="16"/><span>主页</span></a></li>
<li><a href="news.html" class="mhov"><img src="../svgrepo-text-news.svg" width="16" height="16"/><span>新鲜</span></a></li>
<li><a href="starting.html" class="mhov"><img src="../svgrepo-rocket-3-start.svg" width="16" height="16"/><span>入门指南</span></a></li>
<li><a href="https://www.plantuml.com/plantuml/duml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" class="mhov"><img src="../svgrepo-server.svg" width="16" height="16"/><span>Online Server</span></a></li>
<li><a href="running.html" class="mhov"><img src="../svgrepo-play.svg" width="16" height="16"/><span>使用</span></a></li>
<li><a href="faq.html" class="mhov"><img src="../svgrepo-forum.svg" width="16" height="16"/><span>常见问题</span></a></li>
<li><a href="download.html" class="mhov"><img src="../svgrepo-add-to-online-cart.svg" width="16" height="16"/><span>下载</span></a></li>
<li><a href="../qa.html" class="mhov"><img src="../svgrepo-forum-message.svg" width="16" height="16"/><span>论坛 </span></a></li>
<li><a href="theme.html" class="mhov"><img src="../svgrepo-palette-fill.svg" width="16" height="16"/><span>Theme</span></a></li>
<li><a href="preprocessing.html" class="mhov"><img src="../svgrepo-cpu.svg" width="16" height="16"/><span>预处理</span></a></li>
<li><a href="stdlib.html" class="mhov"><img src="../svgrepo-books-library.svg" width="16" height="16"/><span>标准库</span></a></li>
<li><a href="https://crashedmind.github.io/PlantUMLHitchhikersGuide" class="mhov"><img src="../svgrepo-signpost-fill.svg" width="16" height="16"/><span>Hitchhiker&#39;s Guide</span></a></li>
<li><a href="guide.html" class="mhov"><img src="../svgrepo-library.svg" width="16" height="16"/><span>用户指南(PDF)</span></a></li>
</ul>

<!-- menu 20-->
<div>

<!-- Ezoic - Zmenubottom - sidebar_bottom -->
<span id="ezoic-pub-ad-placeholder-108"></span><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-120x240-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-125x125-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-180x150-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-200x200-108-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Zmenubottom - sidebar_bottom -->

</div>
</div>

<!-- d menu 30 --><div>
</div>


<!-- e menu 40 --><div style="margin-bottom:35px;">

<!-- Ezoic - menu40 - sidebar -->
<span id="ezoic-pub-ad-placeholder-186"></span><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-120x240-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-125x125-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-180x150-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-200x200-186-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - menu40 - sidebar -->

</div>

</div><!-- cde -->




</div><!-- mmm -->

<div id="qqq">

<div class="cd">
<div class="aaa"></div>
<div class="bbborder"></div>
</div><!-- cd -->

</div><!-- qqq -->

<div id="rrr">

<div class="cd">
<div class="aaa"></div>

<div style="height:5px;"></div>

<div class="bbb">

<div class="cde">

<!-- c --><div>
</div>

<!-- d --><div>
<!-- Ezoic - Left2 - sidebar -->
<span id="ezoic-pub-ad-placeholder-175"></span><!-- ezoic_pub_ad_placeholder-175-sidebar-120x600-175-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-175-sidebar-160x600-175-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Left2 - sidebar -->
</div>

<!-- e --><div>
</div>

</div><!-- cde -->

</div><!-- bbb -->

</div><!-- cd -->


</div><!-- rrr -->



</div><!-- flex1 -->


</div><!-- left0 -->

<style>
#contmenu {
display: flex;
height: 30px;
width: 100%;
margin: 0;
padding: 0;
}

#contmenua {
height: 30px;
padding-right: 25px;
}

#contmenub {
z-index:15;
display: inline-block;
flex-grow:1;
flex-shrink:1;
height: 30px;
background-color: #222222;
}

#magic {
white-space: nowrap;
overflow: hidden;
z-index: 14;
position: fixed;
top: 0;
right: 50px;
height: 30px;
width: 30px;
}

#magic2 {
white-space: nowrap;
overflow: hidden;
z-index: 16;
position: fixed;
top: 0;
right: 0;
height: 30px;
width: 50px;
background-color: #222222;
}
#magic2 img {
margin: 5px 0 0 5px;
filter: invert(86%) sepia(23%) saturate(200%) hue-rotate(170deg) brightness(86%) contrast(88%);
}
#magic2:hover img {
filter: invert(59%) sepia(81%) saturate(1778%) hue-rotate(164deg) brightness(105%) contrast(103%);
}


#magic:hover #svgrepoleft {
filter: invert(59%) sepia(81%) saturate(1778%) hue-rotate(164deg) brightness(105%) contrast(103%);
}


#magic:hover {
width: 100%;
height: 31px;
}

#aze {
	height: 30px;
	display:flex;
	flex-direction: row-reverse;
}
#aze1 {
	height: 30px;
	background-color: #222222;
}
#aze2 {
	height: 30px;
	background-color: #222222;
	padding-left: 10px;
	border-left: 1px solid #333333;
	border-bottom: 1px solid #333333;
}
#aze1 img {
    filter: invert(72%) sepia(4%) saturate(1039%) hue-rotate(169deg) brightness(108%) contrast(84%);
}
#aze3 {
	width: 3px;
	height: 30px;
	background-color: #222222;
}



</style>

<div id="header">
<div id="contmenu">
<div id="contmenua">
<div class="menu1">
<a href="sequence-diagram.html">时序图</a>
<a href="use-case-diagram.html">用例图</a>
<a href="class-diagram.html">类图</a>
<a href="activity-diagram-beta.html">活动图</a>
<a href="component-diagram.html">组件图</a>
<a href="state-diagram.html">状态图</a>
<a href="object-diagram.html">对象图</a>
<a href="deployment-diagram.html">部署图</a>
<a href="timing-diagram.html">定时图</a>

<a href="nwdiag.html">Network</a>
<a href="salt.html">Wireframe</a>
<a href="archimate-diagram.html">Archimate</a>
<a href="gantt-diagram.html">Gantt</a>
<a href="mindmap-diagram.html">MindMap</a>
<a href="wbs-diagram.html">WBS</a>
<a href="json.html">JSON</a>
<a href="yaml.html">YAML</a>

</div>
</div>
<div id="contmenub"></div>
</div><!--contmenu-->
<!-- https://developer.mozilla.org/fr/docs/Web/CSS/position -->
<div id="magic">

	<div id="aze">
		<div id="aze1"><img id="svgrepoleft" width="30" height="30" src="../svgrepo-left.svg"/> </div><!-- aze1 -->
		<div id="aze2">

<div class="menu1">
<a href="sequence-diagram.html">时序图</a>
<a href="use-case-diagram.html">用例图</a>
<a href="class-diagram.html">类图</a>
<a href="activity-diagram-beta.html">活动图</a>
<a href="component-diagram.html">组件图</a>
<a href="state-diagram.html">状态图</a>
<a href="object-diagram.html">对象图</a>
<a href="deployment-diagram.html">部署图</a>
<a href="timing-diagram.html">定时图</a>

<a href="nwdiag.html">Network</a>
<a href="salt.html">Wireframe</a>
<a href="archimate-diagram.html">Archimate</a>
<a href="gantt-diagram.html">Gantt</a>
<a href="mindmap-diagram.html">MindMap</a>
<a href="wbs-diagram.html">WBS</a>
<a href="json.html">JSON</a>
<a href="yaml.html">YAML</a>

</div>
			

		</div><!-- aze2 -->
		<div id="aze3"></div><!-- aze3 https://codepen.io/sosuke/pen/Pjoqqp -->
	</div><!-- aze -->


</div><!--magic-->

<div id="magic2">

<a href="../zh/class-diagram.html">
<img src="../svgrepo-uxwing-dark-mode-toggle.svg" height="20"/>
</a>


</div><!--magic2-->

</div><!-- header -->
<div id="header2"></div>





<div id="root">

<!-- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -->

<style>

#haut1 {
	margin:50px 0 20px;
	padding:0;
	min-height:80px;
}

#donate {
	padding-top: 5px;
	min-height:30px;
}

</style>

<div id="haut1">

<!-- c --><div style="float:left;">	
<!-- a simple div with some links -->
<div class="breadcrumb">
<a href="sitemap.html">PlantUML</a>
<a href="https://plantuml.com/zh-dark/sitemap-language-specification">Language specification</a>
<a href="class-diagram.html">Class Diagram</a>
<a href="class-diagram.html#"></a>
</div>


<div id="donate">

 

<a href="https://discord.gg/sXhzexAQGh" style="text-decoration: none;">
<img src="https://img.shields.io/discord/1083727021328306236?color=5865F2&amp;logo=discord&amp;logoColor=white" alt="Discord server"/>
</a>

 

<a href="https://github.com/sponsors/plantuml/" style="text-decoration: none;">
<img src="https://img.shields.io/github/sponsors/plantuml?logo=github"/>
</a>

 

<a href="https://www.patreon.com/bePatron?patAmt=1&amp;u=527450&amp;rid=152970" style="text-decoration: none;">
<img src="https://img.shields.io/badge/patreon-122-chocolate?logo=patreon"/>
</a>

 

<a href="../lp.html" style="text-decoration: none;">
<img src="https://img.shields.io/liberapay/patrons/plantuml?color=gold&amp;logo=liberapay&amp;label=liberapay"/>
</a>

 

<a href="../en/paypal.html" style="text-decoration: none;">
<img src="https://img.shields.io/badge/paypal-296-skyblue?logo=paypal&amp;logoColor=red"/>
</a>

<!--
 

<a href="https://github.com/sponsors/plantuml" style="text-decoration: none;">
<img src="https://img.shields.io/github/sponsors/plantuml?label=github">
</a>

-->
</div> <!-- donate -->
</div><!-- c -->


<!-- e --><div style="float:right; margin:3px 0;">

<!-- https://github.com/joielechong/iso-country-flags-svg-collection -->

<!-- https://www.flaticon.com/packs/international-flags -->
<!-- https://flagicons.lipis.dev/?continent=Europe -->
<!-- https://flagpedia.net/download/icons -->

<!-- https://www.countryflags.io/ -->

<style>
#langlist {
display: flex;
justify-content: space-between;
width: 317px;
height: 16px;
margin: 3px 10px 3px 0;
}

.sel2 {
  border: 2px solid #1B1B1B;
}
.nosel2 {
  border: 2px solid #1B1B1B;
  filter: grayscale(100%) opacity(75%);
}
.sel2:hover, .nosel2:hover {
  cursor: pointer;
  border: 2px solid #8CB4FF;
  border-spacing: 0;
  filter: grayscale(0%);
  filter: contrast(200%);
  filter: brightness(150%);
}
#flag1,#flag2,#flag3,#flag4,#flag5,#flag6,#flag7,#flag8 {
background: url(../flags21.png);
background-repeat: no-repeat;
background-clip: content-box;
width: 22px;
height: 16px;
}
#flag2 {
background-position: -22px 0px;
}
#flag3 {
background-position: -44px 0px;
}
#flag4 {
background-position: -66px 0px;
}
#flag5 {
background-position: -88px 0px;
}
#flag6 {
background-position: -110px 0px;
}
#flag7 {
background-position: -132px 0px;
}
#flag8 {
background-position: -154px 0px;
}
</style>

<div id="langlist">


<div id="flag1" onclick="location.href=&#39;/en-dark/class-diagram&#39;" class="nosel2"></div>

<div id="flag2" onclick="location.href=&#39;/de-dark/class-diagram&#39;" class="nosel2"></div>


<div id="flag3" onclick="location.href=&#39;/es-dark/class-diagram&#39;" class="nosel2"></div>


<div id="flag4" onclick="location.href=&#39;/fr-dark/class-diagram&#39;" class="nosel2"></div>


<div id="flag5" onclick="location.href=&#39;/ja-dark/class-diagram&#39;" class="nosel2"></div>


<div id="flag6" onclick="location.href=&#39;/ko-dark/class-diagram&#39;" class="nosel2"></div>


<div id="flag7" onclick="location.href=&#39;/ru-dark/class-diagram&#39;" class="nosel2"></div>


<div id="flag8" onclick="location.href=&#39;/zh-dark/class-diagram&#39;" class="sel2"></div>






</div><!-- langlist -->
</div><!-- e -->

</div><!-- haut1 -->


<p>


<style>
#topsticky {
	z-index:2;
	margin: 0 240px 0 0;
}

@media screen and (min-height: 800px) {
#topsticky {
  position:sticky; top: 40px;
}
}

@media screen and (max-width: 1500px) {
#topsticky {
	margin: 0;
}
}

</style>

</p><div id="topsticky">
<!-- Ezoic - under page title -->
<span id="ezoic-pub-ad-placeholder-647"></span><!-- ezoic_pub_ad_placeholder-647-under_page_title-320x100-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-300x50v2-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-320x50-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-468x60-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-728x90-647-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - under page title -->
</div>


<p>


<a style="position:relative;top:-38px;" name="0bb074dd4a565b5d"></a>
<style>


#toc {
z-index: 2;
position:sticky; top: 40px;
list-style-type: none;
margin: 0;
padding: 0 10px;
}
.chap {
clear:both;
}
#toc ul {
list-style-type: none;
max-height:87vh;
overflow-y: auto;
background: #000000;
border-width: 2px;
border-style: groove;
border-radius: 3px;
border-color: #e1e4e8;
margin: 0;
padding: 0;
}
@media screen and (min-height: 450px) {
#toc ul {max-height:89.5vh;
}
}
@media screen and (min-height: 550px) {
#toc ul {max-height:91.5vh;
}
}
@media screen and (min-height: 700px) {
#toc ul {max-height:93.5vh;
}
}
@media screen and (min-height: 900px) {
#toc ul {max-height:94.5vh;
}
}
#toc li {
margin: 5px 5px 5px 10px;
padding: 0;
}
@media screen and (max-width: 1500px) {
	#toctd {
	display: none;
	}	
	#toc {
	display: none;
	}	
}
</style>

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody><tr valign="top" width="100%">
<td valign="top">
<!--heading--><h1 class="chap"><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#0"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#0"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#0"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>类图</h1>
<p></p>
类图的设计语法与编程语言的传统语法相似。这种相似性为开发人员提供了一个熟悉的环境，从而使创建图表的过程更简单、更直观。
<p></p>
这种设计方法不仅简洁，而且还能创建既简洁又富有表现力的表述。此外，它还允许通过与序列图相呼应的语法来描绘类之间的关系，为流畅而深刻地描绘类之间的交互铺平了道路。
<p></p>
除了结构和关系表示法，类图语法还支持进一步的丰富，如包含注释和应用颜色，使用户能够创建信息丰富且视觉上吸引人的图表。
<p></p>
您可以了解更多有关<a href="https://plantuml.com/zh-dark/commons">PlantUML 中</a>一些<a href="https://plantuml.com/zh-dark/commons">常用命令</a>的信息，以增强您的图表创建体验。
<a style="position:relative;top:-38px;" name="e5cec68ef9127fc4"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#1"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#1"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#1"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>元素声明</h2>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg23aa681f8acf06d2d8dd99d0491b9a99" class="msg">
🎉 Copied!
</div>
<img width="16" height="16" id="img23aa681f8acf06d2d8dd99d0491b9a99" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;23aa681f8acf06d2d8dd99d0491b9a99&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;23aa681f8acf06d2d8dd99d0491b9a99&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;23aa681f8acf06d2d8dd99d0491b9a99&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre23aa681f8acf06d2d8dd99d0491b9a99">@startuml
abstract        abstract
abstract class  &#34;abstract class&#34;
annotation      annotation
circle          circle
()              circle_short_form
class           class
class           class_stereo  &lt;&lt;stereotype&gt;&gt;
diamond         diamond
&lt;&gt;              diamond_short_form
entity          entity
enum            enum
exception       exception
interface       interface
metaclass       metaclass
protocol        protocol
stereotype      stereotype
struct          struct
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="633" height="402" class="scale" src="../imgw/dark-23aa681f8acf06d2d8dd99d0491b9a99.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[参考<code class="cod">protocol</code> 和<code class="cod">struct</code>:<a href="https://github.com/plantuml/plantuml/pull/1028">GH-1028</a>, 对于<code class="cod">exception</code>:<a href="https://forum.plantuml.net/16258/adding-exception-keyword-for-class-diagram">QA-16258</a>]</em>
<a style="position:relative;top:-38px;" name="9dd2a6eca0c2a0e7"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish0 - under_second_paragraph -->
<span id="ezoic-pub-ad-placeholder-179"></span><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-234x60-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-468x60-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-728x90-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-970x90-179-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish0 - under_second_paragraph -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#2"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#2"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#2"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>类之间的关系</h2>
<p></p>
类之间的关系是用以下符号定义的。
<p></p>
<table border="1" cellspacing="0" cellpadding="5">
<tbody><tr>
<td><b>
关系类型
</b></td>
<td><b>
符号
</b></td>
<td><b>
绘图
</b></td>
</tr>
<tr>
<td>
泛化关系
</td>
<td>
<code class="cod">&lt;|--</code>
</td>
<td>
<img loading="lazy" src="../img/extends01.png"/>
</td>
</tr>
<tr>
<td>
组合关系
</td>
<td>
<code class="cod">*--</code>
</td>
<td>
<img loading="lazy" src="../img/sym03.png"/>
</td>
</tr>
<tr>
<td>
聚合关系
</td>
<td>
<code class="cod">o--</code>
</td>
<td>
<img loading="lazy" src="../img/sym01.png"/>
</td>
</tr>
</tbody></table>
<p></p>
可以用<code class="cod">..</code> 来代替<code class="cod">--</code> ，会显示为虚线。
<p></p>
示例：
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg613a4e0a8abe4b01abfdb8dd57f22bee" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img613a4e0a8abe4b01abfdb8dd57f22bee" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;613a4e0a8abe4b01abfdb8dd57f22bee&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;613a4e0a8abe4b01abfdb8dd57f22bee&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;613a4e0a8abe4b01abfdb8dd57f22bee&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre613a4e0a8abe4b01abfdb8dd57f22bee">@startuml
Class01 &lt;|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="568" height="169" class="scale" src="../imgw/dark-613a4e0a8abe4b01abfdb8dd57f22bee.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg3b72b9ea39442f6f2906be22f57481e7" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img3b72b9ea39442f6f2906be22f57481e7" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;3b72b9ea39442f6f2906be22f57481e7&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;3b72b9ea39442f6f2906be22f57481e7&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;3b72b9ea39442f6f2906be22f57481e7&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre3b72b9ea39442f6f2906be22f57481e7">@startuml
Class11 &lt;|.. Class12
Class13 --&gt; Class14
Class15 ..&gt; Class16
Class17 ..|&gt; Class18
Class19 &lt;--* Class20
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="568" height="169" class="scale" src="../imgw/dark-3b72b9ea39442f6f2906be22f57481e7.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgf874eab4eb82d1e825b803e81f52a729" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgf874eab4eb82d1e825b803e81f52a729" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f874eab4eb82d1e825b803e81f52a729&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f874eab4eb82d1e825b803e81f52a729&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;f874eab4eb82d1e825b803e81f52a729&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pref874eab4eb82d1e825b803e81f52a729">@startuml
Class21 #-- Class22
Class23 x-- Class24
Class25 }-- Class26
Class27 +-- Class28
Class29 ^-- Class30
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="568" height="169" class="scale" src="../imgw/dark-f874eab4eb82d1e825b803e81f52a729.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="4a705b44651caa59"></a>
</p><div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#3"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#3"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#3"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>关系上的标签</h2>
<p></p>
<p></p>
在关系之间使用标签来说明时, 使用 <code class="cod">:</code>后接
标签文字。
<p></p>
对元素的说明，你可以在每一边使用 <code class="cod">&#34;&#34;</code>
来说明.
<p></p>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgb7978220eb817d271ecedf33a3cc7980" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgb7978220eb817d271ecedf33a3cc7980" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;b7978220eb817d271ecedf33a3cc7980&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;b7978220eb817d271ecedf33a3cc7980&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;b7978220eb817d271ecedf33a3cc7980&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preb7978220eb817d271ecedf33a3cc7980">@startuml

类01 &#34;1&#34; *-- &#34;many&#34; 类02 : 包含

类03 o-- 类04 : 聚合

类05 --&gt; &#34;1&#34; 类06

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="272" height="187" class="scale" src="../imgw/dark-b7978220eb817d271ecedf33a3cc7980.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
在标签的开始或结束位置添加<code class="cod">&lt;</code> 或 <code class="cod">&gt;</code>以表明是哪个对象作用到哪个对象上。
<p></p>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgb114cc7087d5237f6e9fc8dbb438d067" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgb114cc7087d5237f6e9fc8dbb438d067" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;b114cc7087d5237f6e9fc8dbb438d067&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;b114cc7087d5237f6e9fc8dbb438d067&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;b114cc7087d5237f6e9fc8dbb438d067&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preb114cc7087d5237f6e9fc8dbb438d067">@startuml
class 汽车

发动机 - 汽车 : 驱动 &gt;
汽车 *- 轮子 : 拥有 4 &gt;
汽车 -- 人 : &lt; 所属

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="370" height="187" class="scale" src="../imgw/dark-b114cc7087d5237f6e9fc8dbb438d067.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="bd62ba9333d08763"></a>
</p><div style="clear:both;min-height:110px;margin-top:10px;">


<div class="pezoic">
<!-- Ezoic - Fish1 - mid_content -->
<span id="ezoic-pub-ad-placeholder-114"></span><!-- ezoic_pub_ad_placeholder-114-mid_content-234x60-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-468x60-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-728x90-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-970x90-114-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish1 - mid_content -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#4"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#4"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#4"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>在元素名称和关系标签中使用非字母</h2>
<p></p>
<p></p>
如果你想在类(或枚举...)的显示名称中使用<a href="https://plantuml.com/zh-dark/unicode">非字母</a>，你可以：
<ul>
<li>在类定义中使用<code class="cod">as</code> 关键字来指定一个别名</li>
<li>在类名称周围加上引号<code class="cod">&#34;&#34;</code> </li>
</ul>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg0695f1bedd3167bac067a02c689a7ac9" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img0695f1bedd3167bac067a02c689a7ac9" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;0695f1bedd3167bac067a02c689a7ac9&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;0695f1bedd3167bac067a02c689a7ac9&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;0695f1bedd3167bac067a02c689a7ac9&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre0695f1bedd3167bac067a02c689a7ac9">@startuml
class &#34;This is my class&#34; as class1
class class2 as &#34;It works this way too&#34;

class2 *-- &#34;foo/dummy&#34; : use
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="336" height="187" class="scale" src="../imgw/dark-0695f1bedd3167bac067a02c689a7ac9.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
如果一个别名被分配给一个元素，文件的其余部分必须用别名而不是名称来指代该元素。
<p></p>
<h3>以<code class="cod">$</code></h3>
<h3>开始的名称注意，以<code class="cod">$</code> 开始的名称以后不能被隐藏或删除，因为<code class="cod">hide</code> 和<code class="cod">remove</code> 命令会认为该名称是<code class="cod">$tag</code> 而不是一个组件名称。要想以后删除这些元素，它们必须有一个别名或必须被标记。</h3>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg5dd89cc51e80831d56695cc98cd701e3" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img5dd89cc51e80831d56695cc98cd701e3" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;5dd89cc51e80831d56695cc98cd701e3&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;5dd89cc51e80831d56695cc98cd701e3&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;5dd89cc51e80831d56695cc98cd701e3&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre5dd89cc51e80831d56695cc98cd701e3">@startuml
class $C1
class $C2 $C2
class &#34;$C2&#34; as dollarC2
remove $C1
remove $C2
remove dollarC2
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="71" height="61" class="scale" src="../imgw/dark-5dd89cc51e80831d56695cc98cd701e3.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
还要注意的是，以<code class="cod">$</code> 开始的名字是有效的，但是要给这样的元素分配一个别名，必须把名字放在引号<code class="cod">&#34;&#34;</code> 之间。
<a style="position:relative;top:-38px;" name="090967fbee930909"></a>
</p><div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#5"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#5"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#5"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>添加方法</h2>
<p></p>
要声明属性和方法，你可以使用符号<code class="cod">:</code>，后面跟字段或方法的名称。
<p></p>
编译器会通过检查括号来选择方法和字段。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgdfece97f850602cb2759823561771bf7" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgdfece97f850602cb2759823561771bf7" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;dfece97f850602cb2759823561771bf7&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;dfece97f850602cb2759823561771bf7&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;dfece97f850602cb2759823561771bf7&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="predfece97f850602cb2759823561771bf7">@startuml
Object &lt;|-- ArrayList

Object : equals()
ArrayList : Object[] elementData
ArrayList : size()

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="158" height="222" class="scale" src="../imgw/dark-dfece97f850602cb2759823561771bf7.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
可用花括号<code class="cod">{}</code> 为所有属性和方法分组。
<p></p>
注意，语法对类型/名称的顺序有很大的灵活性。
<p></p>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msga054a2c9f6838418119098dd46e0c8b8" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imga054a2c9f6838418119098dd46e0c8b8" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;a054a2c9f6838418119098dd46e0c8b8&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;a054a2c9f6838418119098dd46e0c8b8&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;a054a2c9f6838418119098dd46e0c8b8&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prea054a2c9f6838418119098dd46e0c8b8">@startuml
class Dummy {
  String data
  void methods()
}

class Flight {
   flightNumber : Integer
   departureTime : Date
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="301" height="96" class="scale" src="../imgw/dark-a054a2c9f6838418119098dd46e0c8b8.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
你可以使用<code class="cod">{field}</code>和<code class="cod">{method}</code>修饰符来覆盖编译器对属性和方法的默认识别。
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg8c48be361b23d39bb1fc1f464b1a7b2b" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img8c48be361b23d39bb1fc1f464b1a7b2b" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;8c48be361b23d39bb1fc1f464b1a7b2b&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;8c48be361b23d39bb1fc1f464b1a7b2b&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;8c48be361b23d39bb1fc1f464b1a7b2b&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre8c48be361b23d39bb1fc1f464b1a7b2b">@startuml
class Dummy {
  {field} A field (despite parentheses)
  {method} Some method
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="214" height="103" class="scale" src="../imgw/dark-8c48be361b23d39bb1fc1f464b1a7b2b.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="3644720244dd6c6a"></a>
</p><div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish2 - long_content -->
<span id="ezoic-pub-ad-placeholder-115"></span><!-- ezoic_pub_ad_placeholder-115-long_content-234x60-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-468x60-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-728x90-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-970x90-115-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish2 - long_content -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#6"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#6"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#6"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>定义能见度(可访问性)</h2>
<p></p>
当你定义属性或者方法时，你可以使用特殊符号定义相应条目的可访问性质。
<p></p>
<table border="1" cellspacing="0" cellpadding="5">
<tbody><tr>
<td><b>
字符
</b></td>
<td><b>
图标(属性)
</b></td>
<td><b>
图标(方法)
</b></td>
<td><b>
可访问性
</b></td>
</tr>
<tr>
<td>
<code class="cod">-</code>
</td>
<td>
<img loading="lazy" src="../img/private-field.png"/>
</td>
<td>
<img loading="lazy" src="../img/private-method.png"/>
</td>
<td>
<code class="cod">private</code> 私有
</td>
</tr>
<tr>
<td>
<code class="cod">#</code>
</td>
<td>
<img loading="lazy" src="../img/protected-field.png"/>
</td>
<td>
<img loading="lazy" src="../img/protected-method.png"/>
</td>
<td>
<code class="cod">protected</code> 受保护
</td>
</tr>
<tr>
<td>
<code class="cod">~</code>
</td>
<td>
<img loading="lazy" src="../img/package-private-field.png"/>
</td>
<td>
<img loading="lazy" src="../img/package-private-method.png"/>
</td>
<td>
<code class="cod">package private</code> 包内可见
</td>
</tr>
<tr>
<td>
<code class="cod">+</code>
</td>
<td>
<img loading="lazy" src="../img/public-field.png"/>
</td>
<td>
<img loading="lazy" src="../img/public-method.png"/>
</td>
<td>
<code class="cod">public</code> 公有
</td>
</tr>
</tbody></table>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg29f5126cd9f01fb26abdfe89b4f571da" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img29f5126cd9f01fb26abdfe89b4f571da" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;29f5126cd9f01fb26abdfe89b4f571da&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;29f5126cd9f01fb26abdfe89b4f571da&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;29f5126cd9f01fb26abdfe89b4f571da&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre29f5126cd9f01fb26abdfe89b4f571da">@startuml

class Dummy {
 -field1
 #field2
 ~method1()
 +method2()
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="111" height="138" class="scale" src="../imgw/dark-29f5126cd9f01fb26abdfe89b4f571da.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
你可以采用命令 <code class="cod">skinparam classAttributeIconSize 0</code> 来展示特殊符号本身：
<p></p>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgb9f95b5def926196a3f6372993c00936" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgb9f95b5def926196a3f6372993c00936" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;b9f95b5def926196a3f6372993c00936&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;b9f95b5def926196a3f6372993c00936&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;b9f95b5def926196a3f6372993c00936&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preb9f95b5def926196a3f6372993c00936">@startuml
skinparam classAttributeIconSize 0
class Dummy {
 -field1
 #field2
 ~method1()
 +method2()
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="105" height="138" class="scale" src="../imgw/dark-b9f95b5def926196a3f6372993c00936.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="9fd9d25be2fbb118"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#7"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#7"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#7"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>抽象与静态</h2>
<p></p>
<p></p>
<p></p>
通过修饰符<code class="cod">{static}</code>或者<code class="cod">{abstract}</code>，可以定义静态或者抽象的方法或者属性。
<p></p>
这些修饰符可以写在行的开始或者结束。也可以使用<code class="cod">{classifier}</code>这个修饰符来代替<code class="cod">{static}</code>.
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgdea9355afdeee2ef46ca9c675ab483a8" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgdea9355afdeee2ef46ca9c675ab483a8" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;dea9355afdeee2ef46ca9c675ab483a8&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;dea9355afdeee2ef46ca9c675ab483a8&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;dea9355afdeee2ef46ca9c675ab483a8&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="predea9355afdeee2ef46ca9c675ab483a8">@startuml
class Dummy {
  {static} String id
  {abstract} void methods()
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="125" height="103" class="scale" src="../imgw/dark-dea9355afdeee2ef46ca9c675ab483a8.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<a style="position:relative;top:-38px;" name="08ca680401eefe3a"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish3 - longer_content -->
<span id="ezoic-pub-ad-placeholder-116"></span><!-- ezoic_pub_ad_placeholder-116-longer_content-234x60-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-468x60-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-728x90-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-970x90-116-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish3 - longer_content -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#8"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#8"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#8"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>高级类体</h2>
<p></p>
<p></p>
<p></p>
PlantUML默认自动将方法和属性重新分组，你可以自己定义分隔符来重排方法和属性，下面的分隔符都是可用的：<code class="cod">--</code> <code class="cod">..</code> <code class="cod">==</code> <code class="cod">__</code>.
<p></p>
还可以在分隔符中添加标题：
<p></p>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg0c1108163137ddfc8de78390a8f0ae01" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img0c1108163137ddfc8de78390a8f0ae01" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;0c1108163137ddfc8de78390a8f0ae01&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;0c1108163137ddfc8de78390a8f0ae01&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;0c1108163137ddfc8de78390a8f0ae01&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre0c1108163137ddfc8de78390a8f0ae01">@startuml
class Foo1 {
  You can use
  several lines
  ..
  as you want
  and group
  ==
  things together.
  __
  You can have as many groups
  as you want
  --
  End of class
}

class User {
  .. Simple Getter ..
  + getName()
  + getAddress()
  .. Some setter ..
  + setName()
  __ private data __
  int age
  -- encrypted --
  String password
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="365" height="227" class="scale" src="../imgw/dark-0c1108163137ddfc8de78390a8f0ae01.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<a style="position:relative;top:-38px;" name="59c91a18bcc97bb0"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#9"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#9"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#9"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>备注和版型</h2>
<p></p>
<p></p>
版型通过类关键字(&#34;<code class="cod">&lt;&lt;</code>&#34;和&#34;<code class="cod">&gt;&gt;</code>&#34;)来定义
<p></p>
你可以使用<code class="cod">note left of</code> , <code class="cod">note right of</code> , <code class="cod">note top of</code> , <code class="cod">note bottom of</code>这些关键字来添加备注。
<p></p>
你还可以在类的声明末尾使用<code class="cod">note left</code>, <code class="cod">note right</code>,<code class="cod">note top</code>, <code class="cod">note bottom</code>来添加。
<p></p>
此外，单独用<code class="cod">note</code>这个关键字也是可以的，使用 <code class="cod">..</code> 符号可以作出一条连接它与其它对象的虚线。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg1dab387b5b418cfea3060cbc0a15b500" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img1dab387b5b418cfea3060cbc0a15b500" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;1dab387b5b418cfea3060cbc0a15b500&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;1dab387b5b418cfea3060cbc0a15b500&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;1dab387b5b418cfea3060cbc0a15b500&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre1dab387b5b418cfea3060cbc0a15b500">@startuml
class Object &lt;&lt; general &gt;&gt;
Object &lt;|--- ArrayList

note top of Object : In java, every class\nextends this one.

note &#34;This is a floating note&#34; as N1
note &#34;This note is connected\nto several objects.&#34; as N2
Object .. N2
N2 .. ArrayList

class Foo
note left: On last defined class

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="591" height="391" class="scale" src="../imgw/dark-1dab387b5b418cfea3060cbc0a15b500.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="23ca7846dedbb80a"></a>
</p><div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish4 - longest_content -->
<span id="ezoic-pub-ad-placeholder-117"></span><!-- ezoic_pub_ad_placeholder-117-longest_content-234x60-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-468x60-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-728x90-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-970x90-117-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish4 - longest_content -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#10"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#10"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#10"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>备注中的更多功能</h2>
<p></p>
<p></p>
可以在注释中使用部分html标签 (See <a href="creole.html">Creole expression</a>)：
<p></p>
<ul>
<li><code class="cod">&lt;b&gt;</code></li>
<li><code class="cod">&lt;u&gt;</code></li>
<li><code class="cod">&lt;i&gt;</code></li>
<li><code class="cod">&lt;s&gt;</code>, <code class="cod">&lt;del&gt;</code>, <code class="cod">&lt;strike&gt;</code></li>
<li><code class="cod">&lt;font color=&#34;#AAAAAA&#34;&gt;</code> or <code class="cod">&lt;font color=&#34;colorName&#34;&gt;</code></li>
<li><code class="cod">&lt;color:#AAAAAA&gt;</code> or <code class="cod">&lt;color:colorName&gt;</code></li>
<li><code class="cod">&lt;size:nn&gt;</code> to change font size</li>
<li><code class="cod">&lt;img src=&#34;file&#34;&gt;</code> or <code class="cod">&lt;img:file&gt;</code>: the file must be accessible by the filesystem</li>
</ul>
<p></p>
<p></p>
你也可以在注释中展示多行。
<p></p>
你也可以在定义的class之后直接使用 <code class="cod">note left</code>, <code class="cod">note right</code>,
<code class="cod">note top</code>, <code class="cod">note bottom</code> 来定义注释。
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg6158d2709ef91651c5aba959ac8ba7d0" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img6158d2709ef91651c5aba959ac8ba7d0" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;6158d2709ef91651c5aba959ac8ba7d0&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;6158d2709ef91651c5aba959ac8ba7d0&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;6158d2709ef91651c5aba959ac8ba7d0&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre6158d2709ef91651c5aba959ac8ba7d0">@startuml

class Foo
note left: On last defined class

note top of Foo
  In java, &lt;size:18&gt;every&lt;/size&gt; &lt;u&gt;class&lt;/u&gt;
  &lt;b&gt;extends&lt;/b&gt;
  &lt;i&gt;this&lt;/i&gt; one.
end note

note as N1
  This note is &lt;u&gt;also&lt;/u&gt;
  &lt;b&gt;&lt;color:royalBlue&gt;on several&lt;/color&gt;
  &lt;s&gt;words&lt;/s&gt; lines
  And this is hosted by &lt;img:sourceforge.jpg&gt;
end note

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="579" height="210" class="scale" src="../imgw/dark-6158d2709ef91651c5aba959ac8ba7d0.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="c909b0b5f0434a64"></a>
</p><div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#11"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#11"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#11"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>注释属性 (field, attribute, member) 或方法</h2>
<p></p>
<p></p>
可以在属性（field、attribute、member）或方法上添加注释。
<p></p>
<h3>⚠ 注意</h3>
<ul>
<li>不能与<code class="cod">top</code>和<code class="cod">bottom</code>同时使用 <em>(只支持<code class="cod">left</code>和<code class="cod">right</code>)</em></li>
<li>不能与表示命名空间的分隔符<code class="cod">::</code>同时使用</li>
</ul>
<p></p>
<p></p>
<h3>注释属性或方法</h3>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgcb96c80f6d95dfd94694fe71dcb22ae9" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgcb96c80f6d95dfd94694fe71dcb22ae9" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;cb96c80f6d95dfd94694fe71dcb22ae9&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;cb96c80f6d95dfd94694fe71dcb22ae9&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;cb96c80f6d95dfd94694fe71dcb22ae9&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="precb96c80f6d95dfd94694fe71dcb22ae9">@startuml
class A {
{static} int counter
+void {abstract} start(int timeout)
}
note left of A::counter
  该成员已注释
end note
note right of A::start
  在 UML 注释了此方法
end note
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="487" height="96" class="scale" src="../imgw/dark-cb96c80f6d95dfd94694fe71dcb22ae9.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
<h3>给同名方法注释</h3>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msge10ef606d3990f4f37db08162b758474" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imge10ef606d3990f4f37db08162b758474" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;e10ef606d3990f4f37db08162b758474&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;e10ef606d3990f4f37db08162b758474&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;e10ef606d3990f4f37db08162b758474&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pree10ef606d3990f4f37db08162b758474">@startuml
class A {
{static} int counter
+void {abstract} start(int timeoutms)
+void {abstract} start(Duration timeout)
}
note left of A::counter
  该成员已注释
end note
note right of A::&#34;start(int timeoutms)&#34;
  这个start方法的参数是int类型
end note
note right of A::&#34;start(Duration timeout)&#34;
  这个start方法的参数是Duration类型
end note
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="603" height="113" class="scale" src="../imgw/dark-e10ef606d3990f4f37db08162b758474.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[Ref. <a href="https://forum.plantuml.net/3474">QA-3474</a> and <a href="https://forum.plantuml.net/5835">QA-5835</a>]</em>
<p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="1d010d898a1fead2"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish5 - incontent_5 -->
<span id="ezoic-pub-ad-placeholder-118"></span><!-- ezoic_pub_ad_placeholder-118-incontent_5-234x60-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-468x60-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-728x90-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-970x90-118-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish5 - incontent_5 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#12"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#12"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#12"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>链接的注释</h2>
<p></p>
<p></p>
在定义链接之后，你可以用 <code class="cod">note on link</code> 给链接添加注释
<p></p>
如果想要改变注释相对于标签的位置，你也可以用 <code class="cod">note left on link</code>， <code class="cod">note right on link</code>， <code class="cod">note bottom on link</code>。（对应位置分别在label的左边，右边，下边）
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg9c8025b84db011f9b1187875866723fa" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img9c8025b84db011f9b1187875866723fa" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;9c8025b84db011f9b1187875866723fa&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;9c8025b84db011f9b1187875866723fa&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;9c8025b84db011f9b1187875866723fa&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre9c8025b84db011f9b1187875866723fa">@startuml

class Dummy
Dummy --&gt; Foo : A link
note on link #red: note that is red

Dummy --&gt; Foo2 : Another link
note right on link #blue
this is my note on right link
and in blue
end note

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="436" height="223" class="scale" src="../imgw/dark-9c8025b84db011f9b1187875866723fa.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<a style="position:relative;top:-38px;" name="a339d3559f33ad64"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#13"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#13"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#13"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>抽象类和接口</h2>
<p></p>
<p></p>
用关键字<code class="cod">abstract</code>或<code class="cod">abstract class</code>来定义抽象类。
<p></p>
抽象类用斜体显示。
<p></p>
也可以使用<code class="cod">interface</code>, <code class="cod">annotation</code> 和 <code class="cod">enum</code> 等关键字。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg1a6689bc764659a115100f417895b670" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img1a6689bc764659a115100f417895b670" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;1a6689bc764659a115100f417895b670&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;1a6689bc764659a115100f417895b670&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;1a6689bc764659a115100f417895b670&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre1a6689bc764659a115100f417895b670">@startuml

abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection

List &lt;|-- AbstractList
Collection &lt;|-- AbstractCollection

Collection &lt;|- List
AbstractCollection &lt;|- AbstractList
AbstractList &lt;|-- ArrayList

class ArrayList {
  Object[] elementData
  size()
}

enum TimeUnit {
  DAYS
  HOURS
  MINUTES
}

annotation SuppressWarnings

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="571" height="365" class="scale" src="../imgw/dark-1a6689bc764659a115100f417895b670.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
*[参考: &#39;标注和成员&#39; <a href="https://github.com/plantuml/plantuml/issues/458">Issue#458</a>]*
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="6a8ec84e53ede3ae"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish6 - incontent_6 -->
<span id="ezoic-pub-ad-placeholder-119"></span><!-- ezoic_pub_ad_placeholder-119-incontent_6-234x60-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-468x60-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-728x90-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-970x90-119-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish6 - incontent_6 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#14"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#14"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#14"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>隐藏属性、函数等</h2>
<p></p>
通过使用命令“<code class="cod">hide/show</code>”，你可以用参数表示类的显示方式。
<p></p>
基础命令是: <code class="cod">hide empty members</code>. 这个命令会隐藏空白的方法和属性。
<p></p>
除 <code class="cod">empty members</code> 外，你可以用:
<ul>
<li><code class="cod">empty fields</code> 或者 <code class="cod">empty attributes</code> 空属性,</li>
<li><code class="cod">empty methods</code> 空函数，</li>
<li><code class="cod">fields</code> 或 <code class="cod">attributes</code> 隐藏字段或属性，即使是被定义了</li>
<li><code class="cod">methods</code> 隐藏方法，即使是被定义了</li>
<li><code class="cod">members</code> 隐藏字段 <u>和</u> 方法，即使是被定义了</li>
<li><code class="cod">circle</code> 类名前带圈的，</li>
<li><code class="cod">stereotype</code>  原型。</li>
</ul>
<p></p>
同样可以使用 <code class="cod">hide</code> 或 <code class="cod">show</code> 关键词，对以下内容进行设置：
<ul>
<li><code class="cod">class</code> 所有类，</li>
<li><code class="cod">interface</code> 所有接口，</li>
<li><code class="cod">enum</code> 所有枚举，</li>
<li><code class="cod">&lt;&lt;foo1&gt;&gt;</code> 实现 <em>foo1</em> 的类，</li>
<li>一个既定的类名。</li>
</ul>
<p></p>
你可以使用 <code class="cod">show/hide</code> 命令来定义相关规则和例外。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msga9625958027a1113526ba1ebc568801d" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imga9625958027a1113526ba1ebc568801d" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;a9625958027a1113526ba1ebc568801d&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;a9625958027a1113526ba1ebc568801d&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;a9625958027a1113526ba1ebc568801d&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prea9625958027a1113526ba1ebc568801d">@startuml

class Dummy1 {
  +myMethods()
}

class Dummy2 {
  +hiddenMethod()
}

class Dummy3 &lt;&lt;Serializable&gt;&gt; {
String name
}

hide members
hide &lt;&lt;Serializable&gt;&gt; circle
show Dummy1 methods
show &lt;&lt;Serializable&gt;&gt; fields

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="243" height="199" class="scale" src="../imgw/dark-a9625958027a1113526ba1ebc568801d.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<a style="position:relative;top:-38px;" name="20ec7d48c223b142"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#15"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#15"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#15"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>隐藏类</h2>
<p></p>
<p></p>
你也可以使用 <code class="cod">show/hide</code> 命令来隐藏类
<p></p>
如果你定义了一个大的<a href="preprocessing.html">!included</a> 文件，且想在文件包含之后隐藏部分类，该功能会很有帮助。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg7c41dc3b9e056a73390a4a6352785202" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img7c41dc3b9e056a73390a4a6352785202" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;7c41dc3b9e056a73390a4a6352785202&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;7c41dc3b9e056a73390a4a6352785202&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;7c41dc3b9e056a73390a4a6352785202&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre7c41dc3b9e056a73390a4a6352785202">@startuml

class Foo1
class Foo2

Foo2 *-- Foo1

hide Foo2

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="78" height="169" class="scale" src="../imgw/dark-7c41dc3b9e056a73390a4a6352785202.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="3efa75742a5e3384"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish7 - incontent_7 -->
<span id="ezoic-pub-ad-placeholder-120"></span><!-- ezoic_pub_ad_placeholder-120-incontent_7-234x60-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-468x60-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-728x90-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-970x90-120-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish7 - incontent_7 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#16"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#16"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#16"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>删除类</h2>
<p></p>
您还可以使用<code class="cod">remove</code>命令来删除类。
<p></p>
如果您定义了一个大的 [!included file]（预处理），
并且如果您想在 [file contains]（预处理）之后删除一些类，这可能很有用。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgfeb0b674668fd60d6a489dd998a76559" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgfeb0b674668fd60d6a489dd998a76559" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;feb0b674668fd60d6a489dd998a76559&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;feb0b674668fd60d6a489dd998a76559&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;feb0b674668fd60d6a489dd998a76559&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prefeb0b674668fd60d6a489dd998a76559">@startuml

class Foo1
class Foo2

Foo2 *-- Foo1

remove Foo2

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="78" height="61" class="scale" src="../imgw/dark-feb0b674668fd60d6a489dd998a76559.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="c0ef243486e3ad85"></a>
</p><div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#17"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#17"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#17"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Hide, Remove or Restore tagged element or wildcard</h2>
<p></p>
You can put <code class="cod">$tags</code> (using <code class="cod">$</code>) on elements, then remove, hide or restore components either individually or by tags.
<p></p>
By default, all components are displayed:
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msga333f129b395367cb7aad6c78aad31c4" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imga333f129b395367cb7aad6c78aad31c4" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;a333f129b395367cb7aad6c78aad31c4&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;a333f129b395367cb7aad6c78aad31c4&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;a333f129b395367cb7aad6c78aad31c4&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prea333f129b395367cb7aad6c78aad31c4">@startuml
class C1 $tag13
enum E1
interface I1 $tag13
C1 -- I1
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="147" height="169" class="scale" src="../imgw/dark-a333f129b395367cb7aad6c78aad31c4.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
But you can:
<ul>
<li><code class="cod">hide $tag13</code> components:</li>
</ul>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgaeda65473c554e4de42411e74f6910a6" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgaeda65473c554e4de42411e74f6910a6" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;aeda65473c554e4de42411e74f6910a6&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;aeda65473c554e4de42411e74f6910a6&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;aeda65473c554e4de42411e74f6910a6&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preaeda65473c554e4de42411e74f6910a6">@startuml
class C1 $tag13
enum E1
interface I1 $tag13
C1 -- I1

hide $tag13
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="147" height="169" class="scale" src="../imgw/dark-aeda65473c554e4de42411e74f6910a6.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<ul>
<li>or <code class="cod">remove $tag13</code> components:</li>
</ul>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg19ff75ab006454609ec48154d67c4cef" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img19ff75ab006454609ec48154d67c4cef" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;19ff75ab006454609ec48154d67c4cef&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;19ff75ab006454609ec48154d67c4cef&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;19ff75ab006454609ec48154d67c4cef&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre19ff75ab006454609ec48154d67c4cef">@startuml
class C1 $tag13
enum E1
interface I1 $tag13
C1 -- I1

remove $tag13
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="62" height="61" class="scale" src="../imgw/dark-19ff75ab006454609ec48154d67c4cef.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<ul>
<li>or <code class="cod">remove $tag13 and restore $tag1</code> components:</li>
</ul>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg360bf0f52029eea343cd6540f9aaea1e" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img360bf0f52029eea343cd6540f9aaea1e" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;360bf0f52029eea343cd6540f9aaea1e&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;360bf0f52029eea343cd6540f9aaea1e&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;360bf0f52029eea343cd6540f9aaea1e&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre360bf0f52029eea343cd6540f9aaea1e">@startuml
class C1 $tag13 $tag1
enum E1
interface I1 $tag13
C1 -- I1

remove $tag13
restore $tag1
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="147" height="61" class="scale" src="../imgw/dark-360bf0f52029eea343cd6540f9aaea1e.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<ul>
<li>or <code class="cod">remove * and restore $tag1</code> components:</li>
</ul>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg3d1703423d8dc7cb77afc134630a8c12" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img3d1703423d8dc7cb77afc134630a8c12" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;3d1703423d8dc7cb77afc134630a8c12&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;3d1703423d8dc7cb77afc134630a8c12&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;3d1703423d8dc7cb77afc134630a8c12&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre3d1703423d8dc7cb77afc134630a8c12">@startuml
class C1 $tag13 $tag1
enum E1
interface I1 $tag13
C1 -- I1

remove *
restore $tag1
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="6" height="6" class="scale" src="../imgw/dark-3d1703423d8dc7cb77afc134630a8c12.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="382f74cc79c4edbc"></a>
</p><div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish8 - incontent_8 -->
<span id="ezoic-pub-ad-placeholder-121"></span><!-- ezoic_pub_ad_placeholder-121-incontent_8-234x60-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-468x60-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-728x90-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-970x90-121-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish8 - incontent_8 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#18"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#18"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#18"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>隐藏或删除未关联的类</h2>
<p></p>
默认情况下, 所有的类都将会展示:
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg090cb556106c728d56578df1efcf2700" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img090cb556106c728d56578df1efcf2700" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;090cb556106c728d56578df1efcf2700&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;090cb556106c728d56578df1efcf2700&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;090cb556106c728d56578df1efcf2700&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre090cb556106c728d56578df1efcf2700">@startuml
class C1
class C2
class C3
C1 -- C2
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="148" height="169" class="scale" src="../imgw/dark-090cb556106c728d56578df1efcf2700.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
不过你可以使用:
<ul>
<li><code class="cod">hide @unlinked</code> 来隐藏未关联的类:</li>
</ul>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg8bc4c8bcece488747d2d159d897b87f9" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img8bc4c8bcece488747d2d159d897b87f9" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;8bc4c8bcece488747d2d159d897b87f9&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;8bc4c8bcece488747d2d159d897b87f9&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;8bc4c8bcece488747d2d159d897b87f9&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre8bc4c8bcece488747d2d159d897b87f9">@startuml
class C1
class C2
class C3
C1 -- C2

hide @unlinked
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="148" height="169" class="scale" src="../imgw/dark-8bc4c8bcece488747d2d159d897b87f9.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<ul>
<li>或者使用 <code class="cod">remove @unlinked</code> 来删除未关联的类:</li>
</ul>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgf1337745f01d853f42df3638d3f2e854" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgf1337745f01d853f42df3638d3f2e854" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f1337745f01d853f42df3638d3f2e854&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f1337745f01d853f42df3638d3f2e854&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;f1337745f01d853f42df3638d3f2e854&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pref1337745f01d853f42df3638d3f2e854">@startuml
class C1
class C2
class C3
C1 -- C2

remove @unlinked
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="63" height="169" class="scale" src="../imgw/dark-f1337745f01d853f42df3638d3f2e854.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
<em>[Adapted from <a href="https://forum.plantuml.net/11052">QA-11052</a>]</em>
<a style="position:relative;top:-38px;" name="b09695ba6d76313d"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#19"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#19"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#19"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>泛型（generics）</h2>
<p></p>
<p></p>
你可以用 <code class="cod">&lt;</code> 和 <code class="cod">&gt;</code> 来定义类的泛型。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg4dd6659fc9513a8e202d1f350d2d481b" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img4dd6659fc9513a8e202d1f350d2d481b" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;4dd6659fc9513a8e202d1f350d2d481b&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;4dd6659fc9513a8e202d1f350d2d481b&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;4dd6659fc9513a8e202d1f350d2d481b&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre4dd6659fc9513a8e202d1f350d2d481b">@startuml

class Foo&lt;? extends Element&gt; {
  int size()
}
Foo *- Element

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="294" height="81" class="scale" src="../imgw/dark-4dd6659fc9513a8e202d1f350d2d481b.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
It is possible to disable this drawing using <code class="cod">skinparam genericDisplay old</code> command.
<p></p>
<a style="position:relative;top:-38px;" name="4b62dd14f1d33739"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish9 - incontent_9 -->
<span id="ezoic-pub-ad-placeholder-122"></span><!-- ezoic_pub_ad_placeholder-122-incontent_9-234x60-122-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-122-incontent_9-468x60-122-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-122-incontent_9-728x90-122-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-122-incontent_9-970x90-122-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish9 - incontent_9 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#20"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#20"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#20"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>指定标记（Spot）</h2>
<p></p>
通常标记字符 (C, I, E or A) 用于标记 类(classes),
接口（interface）, 枚举（enum）和 抽象类（abstract classes）.
<p></p>
但是当你想定义原型时，可以增加对应的单个字符及颜色，来定义自己的标记（spot），就像下面一样：
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msga8c669a19738abf19742957faad2f7c2" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imga8c669a19738abf19742957faad2f7c2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;a8c669a19738abf19742957faad2f7c2&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;a8c669a19738abf19742957faad2f7c2&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;a8c669a19738abf19742957faad2f7c2&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prea8c669a19738abf19742957faad2f7c2">@startuml

class System &lt;&lt; (S,#FF7700) Singleton &gt;&gt;
class Date &lt;&lt; (D,orchid) &gt;&gt;
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="204" height="71" class="scale" src="../imgw/dark-a8c669a19738abf19742957faad2f7c2.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<a style="position:relative;top:-38px;" name="27fe4eb3edbaff8f"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#21"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#21"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#21"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>包</h2>
<p></p>
你可以通过关键词 <code class="cod">package</code> 声明包，同时可选的来声明对应的背景色（通过使用html色彩代码或名称）。
<p></p>
注意：包可以被定义为嵌套。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgd005f12135134e8deae07627661a1acb" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgd005f12135134e8deae07627661a1acb" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;d005f12135134e8deae07627661a1acb&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;d005f12135134e8deae07627661a1acb&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;d005f12135134e8deae07627661a1acb&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pred005f12135134e8deae07627661a1acb">@startuml

package &#34;Classic Collections&#34; #DDDDDD {
  Object &lt;|-- ArrayList
}

package net.sourceforge.plantuml {
  Object &lt;|-- Demo1
  Demo1 *- Demo2
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="503" height="348" class="scale" src="../imgw/dark-d005f12135134e8deae07627661a1acb.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="a05971470d7fd711"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish10 - incontent_10 -->
<span id="ezoic-pub-ad-placeholder-123"></span><!-- ezoic_pub_ad_placeholder-123-incontent_10-234x60-123-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-123-incontent_10-468x60-123-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-123-incontent_10-728x90-123-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-123-incontent_10-970x90-123-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish10 - incontent_10 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#22"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#22"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#22"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>包样式</h2>
<p></p>
包可以定义不同的样式。
<p></p>
你可以通过以下的命令来设置默认样式 : <code class="cod">skinparam packageStyle</code>,或者对包使用对应的模板:
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgbd8a6d046e1a615dcaba28365dd61032" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgbd8a6d046e1a615dcaba28365dd61032" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;bd8a6d046e1a615dcaba28365dd61032&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;bd8a6d046e1a615dcaba28365dd61032&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;bd8a6d046e1a615dcaba28365dd61032&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prebd8a6d046e1a615dcaba28365dd61032">@startuml
scale 750 width
package foo1 &lt;&lt;Node&gt;&gt; {
  class Class1
}

package foo2 &lt;&lt;Rectangle&gt;&gt; {
  class Class2
}

package foo3 &lt;&lt;Folder&gt;&gt; {
  class Class3
}

package foo4 &lt;&lt;Frame&gt;&gt; {
  class Class4
}

package foo5 &lt;&lt;Cloud&gt;&gt; {
  class Class5
}

package foo6 &lt;&lt;Database&gt;&gt; {
  class Class6
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="750" height="128" class="scale" src="../imgw/dark-bd8a6d046e1a615dcaba28365dd61032.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
你也可以参考下面的示例来定义包之间的连线:
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgf4e65205bdeed93025fc42bba7b61f5a" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgf4e65205bdeed93025fc42bba7b61f5a" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f4e65205bdeed93025fc42bba7b61f5a&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f4e65205bdeed93025fc42bba7b61f5a&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;f4e65205bdeed93025fc42bba7b61f5a&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pref4e65205bdeed93025fc42bba7b61f5a">@startuml

skinparam packageStyle rectangle

package foo1.foo2 {
}

package foo1.foo2.foo3 {
  class Object
}

foo1.foo2 +-- foo1.foo2.foo3

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="297" height="320" class="scale" src="../imgw/dark-f4e65205bdeed93025fc42bba7b61f5a.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<a style="position:relative;top:-38px;" name="13d28e8dfc702e34"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#23"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#23"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#23"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>命名空间（Namespaces）</h2>
<p></p>
在使用包（package）时（区别于命名空间），类名是类的唯一标识。
也就意味着，在不同的包（package）中的类，不能使用相同的类名。
<p></p>
在那种情况下（译注：同名、不同全限定名类），你应该使用<a href="https://zh.wikipedia.org/wiki/%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4">命名空间</a>来取而代之。
<p></p>
你可以从其他命名空间，使用全限定名来引用类，
默认命名空间（译注：无名的命名空间）下的类，以一个“.&#34;开头（的类名）来引用（译注：示例中的<code class="cod">BaseClass</code>).
<p></p>
注意：你不用显示地创建命名空间：一个使用全限定名的类会自动被放置到对应的命名空间。
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgdb1fbb6ec9485329af7eba668f3c8535" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgdb1fbb6ec9485329af7eba668f3c8535" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;db1fbb6ec9485329af7eba668f3c8535&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;db1fbb6ec9485329af7eba668f3c8535&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;db1fbb6ec9485329af7eba668f3c8535&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="predb1fbb6ec9485329af7eba668f3c8535">@startuml

class BaseClass

namespace net.dummy #DDDDDD {
    .BaseClass &lt;|-- Person
    Meeting o-- Person

    .BaseClass &lt;|- Meeting
}

namespace net.foo {
  net.dummy.Person  &lt;|- Person
  .BaseClass &lt;|-- Person

  net.dummy.Meeting o-- Person
}

BaseClass &lt;|-- net.unused.Person

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="441" height="356" class="scale" src="../imgw/dark-db1fbb6ec9485329af7eba668f3c8535.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
<p></p>
<p></p>
There won&#39;t be any difference between namespaces and packages anymore: both keywords are now synonymous. 
<p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="0d2504841361d7da"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish11 - incontent_11 -->
<span id="ezoic-pub-ad-placeholder-194"></span><!-- ezoic_pub_ad_placeholder-194-incontent_11-234x60-194-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-194-incontent_11-468x60-194-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-194-incontent_11-728x90-194-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-194-incontent_11-970x90-194-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish11 - incontent_11 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#24"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#24"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#24"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>自动创建命名空间</h2>
<p></p>
<p></p>
<p></p>
使用命令 <code class="cod">set namespaceSeparator ???</code> 你可以自定义命名空间分隔符（为 “.” 以外的字符）.
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msge452fa75f7599d298d357d2137e152d6" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imge452fa75f7599d298d357d2137e152d6" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;e452fa75f7599d298d357d2137e152d6&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;e452fa75f7599d298d357d2137e152d6&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;e452fa75f7599d298d357d2137e152d6&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pree452fa75f7599d298d357d2137e152d6">@startuml

set namespaceSeparator ::
class X1::X2::foo {
  some info
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="166" height="198" class="scale" src="../imgw/dark-e452fa75f7599d298d357d2137e152d6.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
禁止自动创建包则可以使用
<code class="cod">set namespaceSeparator none</code>.
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg2f5aa57ab85a69d372111b856d18697c" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img2f5aa57ab85a69d372111b856d18697c" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;2f5aa57ab85a69d372111b856d18697c&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;2f5aa57ab85a69d372111b856d18697c&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;2f5aa57ab85a69d372111b856d18697c&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre2f5aa57ab85a69d372111b856d18697c">@startuml

set namespaceSeparator none
class X1.X2.foo {
  some info
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="112" height="85" class="scale" src="../imgw/dark-2f5aa57ab85a69d372111b856d18697c.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p></p>
<p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="8b64d7547fa4f699"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#25"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#25"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#25"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>棒棒糖接口</h2>
<p></p>
<p></p>
需要定义棒棒糖样式的接口时可以遵循以下语法:
<p></p>
<ul>
<li><code class="cod">bar ()- foo</code></li>
<li><code class="cod">bar ()-- foo</code></li>
<li><code class="cod">foo -() bar</code></li>
</ul>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg4ad8e56bf1d27b45ca93443a2bd082e1" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img4ad8e56bf1d27b45ca93443a2bd082e1" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;4ad8e56bf1d27b45ca93443a2bd082e1&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;4ad8e56bf1d27b45ca93443a2bd082e1&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;4ad8e56bf1d27b45ca93443a2bd082e1&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre4ad8e56bf1d27b45ca93443a2bd082e1">@startuml
class foo类
bar ()- foo类
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="128" height="61" class="scale" src="../imgw/dark-4ad8e56bf1d27b45ca93443a2bd082e1.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="5a6e75f1261e3d91"></a>
</p><div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish12 - incontent_12 -->
<span id="ezoic-pub-ad-placeholder-195"></span><!-- ezoic_pub_ad_placeholder-195-incontent_12-234x60-195-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-195-incontent_12-468x60-195-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-195-incontent_12-728x90-195-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-195-incontent_12-970x90-195-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish12 - incontent_12 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#26"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#26"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#26"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>改变箭头方向</h2>
<p></p>
类之间默认采用两个破折号 <code class="cod">--</code> 显示出垂直
方向的线. 要得到水平方向的可以像这样使用单破折号 (或者点):
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg5d2c679788e90b610eee4884685d9c98" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img5d2c679788e90b610eee4884685d9c98" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;5d2c679788e90b610eee4884685d9c98&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;5d2c679788e90b610eee4884685d9c98&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;5d2c679788e90b610eee4884685d9c98&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre5d2c679788e90b610eee4884685d9c98">@startuml
教室 o- 学生
教室 *-- 椅子
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="168" height="169" class="scale" src="../imgw/dark-5d2c679788e90b610eee4884685d9c98.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
你也可以通过改变倒置链接来改变方向
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg4b45a9c8a6bb5b9520a2960a271ab753" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img4b45a9c8a6bb5b9520a2960a271ab753" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;4b45a9c8a6bb5b9520a2960a271ab753&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;4b45a9c8a6bb5b9520a2960a271ab753&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;4b45a9c8a6bb5b9520a2960a271ab753&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre4b45a9c8a6bb5b9520a2960a271ab753">@startuml
学生 -o 教室
椅子 --* 教室
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="168" height="169" class="scale" src="../imgw/dark-4b45a9c8a6bb5b9520a2960a271ab753.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
也可通过在箭头内部使用关键字， 例如<code class="cod">left</code>, <code class="cod">right</code>, <code class="cod">up</code>
或者 <code class="cod">down</code>，来改变方向
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgd97b6a005afdd2ed42faf93ea9ef05ff" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgd97b6a005afdd2ed42faf93ea9ef05ff" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;d97b6a005afdd2ed42faf93ea9ef05ff&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;d97b6a005afdd2ed42faf93ea9ef05ff&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;d97b6a005afdd2ed42faf93ea9ef05ff&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pred97b6a005afdd2ed42faf93ea9ef05ff">@startuml
foo -left-&gt; dummyLeft
foo -right-&gt; dummyRight
foo -up-&gt; dummyUp
foo -down-&gt; dummyDown
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="346" height="277" class="scale" src="../imgw/dark-d97b6a005afdd2ed42faf93ea9ef05ff.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
您可以使用缩写形式来表示方向，第一个字符（例如，<code class="cod">-d-</code> 而不是
<code class="cod">-down-</code>) 或前两个字符 (<code class="cod">-do-</code>)。
<p></p>
请注意，您不应滥用此功能：<em>Graphviz</em> 通常无需调整即可提供良好的结果。
<p></p>
同时也支持 <a href="use-case-diagram.html#d551e48d272b2b07"><code class="cod">left to right direction</code></a> 参数: 
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg167e5757b15e5206a813c6bb3948b274" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img167e5757b15e5206a813c6bb3948b274" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;167e5757b15e5206a813c6bb3948b274&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;167e5757b15e5206a813c6bb3948b274&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;167e5757b15e5206a813c6bb3948b274&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre167e5757b15e5206a813c6bb3948b274">@startuml
left to right direction
foo -left-&gt; dummyLeft
foo -right-&gt; dummyRight
foo -up-&gt; dummyUp
foo -down-&gt; dummyDown
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="449" height="227" class="scale" src="../imgw/dark-167e5757b15e5206a813c6bb3948b274.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="fbbc0504d940020e"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#27"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#27"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#27"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>“关系”类</h2>
<p></p>
你可以在定义了两个类之间的关系后定义一个 <em> 关系类 association class</em> 例如:
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgb25efbc507617923ddfc5e95e02508b0" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgb25efbc507617923ddfc5e95e02508b0" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;b25efbc507617923ddfc5e95e02508b0&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;b25efbc507617923ddfc5e95e02508b0&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;b25efbc507617923ddfc5e95e02508b0&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preb25efbc507617923ddfc5e95e02508b0">@startuml
class Student {
  Name
}
Student &#34;0..*&#34; - &#34;1..*&#34; Course
(Student, Course) .. Enrollment

class Enrollment {
  drop()
  cancel()
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="246" height="222" class="scale" src="../imgw/dark-b25efbc507617923ddfc5e95e02508b0.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
也可以用另一种方式:
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgfd8a644e2f6ce6d083a8967329f69b7b" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgfd8a644e2f6ce6d083a8967329f69b7b" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;fd8a644e2f6ce6d083a8967329f69b7b&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;fd8a644e2f6ce6d083a8967329f69b7b&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;fd8a644e2f6ce6d083a8967329f69b7b&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prefd8a644e2f6ce6d083a8967329f69b7b">@startuml
class Student {
  Name
}
Student &#34;0..*&#34; -- &#34;1..*&#34; Course
(Student, Course) . Enrollment

class Enrollment {
  drop()
  cancel()
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="190" height="330" class="scale" src="../imgw/dark-fd8a644e2f6ce6d083a8967329f69b7b.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<a style="position:relative;top:-38px;" name="43980c266e3ad62c"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish13 - incontent_13 -->
<span id="ezoic-pub-ad-placeholder-196"></span><!-- ezoic_pub_ad_placeholder-196-incontent_13-234x60-196-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-196-incontent_13-468x60-196-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-196-incontent_13-728x90-196-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-196-incontent_13-970x90-196-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish13 - incontent_13 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#28"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#28"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#28"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>同级关联(Association on same classe)</h2>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg108b96fff0b17c553bf01021f6fb1d07" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img108b96fff0b17c553bf01021f6fb1d07" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;108b96fff0b17c553bf01021f6fb1d07&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;108b96fff0b17c553bf01021f6fb1d07&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;108b96fff0b17c553bf01021f6fb1d07&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre108b96fff0b17c553bf01021f6fb1d07">@startuml
class 站台 {
    +名称: 字符串
}

class 通道 {
    +花费: 剩余时间
}

&lt;&gt; 结点

通道 . 结点
结点 - &#34;从 0..*&#34; 站台
结点 - &#34;到 0..* &#34; 站台
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="329" height="84" class="scale" src="../imgw/dark-108b96fff0b17c553bf01021f6fb1d07.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[参考: <a href="http://wiki.plantuml.net/site/incubation#associations">Incubation: Associations</a>]</em>
<p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="7aa53dbdfc2137bf"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#29"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#29"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#29"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>样式参数</h2>
<p></p>
<p></p>
用<a href="https://plantuml.com/zh-dark/skinparam">skinparam</a>改变字体和颜色。
<p></p>
可以在如下场景中使用：
<ul>
<li>在图示的定义中，</li>
<li><a href="preprocessing.html">在引入的文件中</a>，</li>
<li>在<a href="https://plantuml.com/zh-dark/command-line">命令行</a>或者<a href="https://plantuml.com/zh-dark/ant-task">ANT任务</a>提供的配置文件中。</li>
</ul>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgd09f6d0f9d4d19b4b158182da0ad877a" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgd09f6d0f9d4d19b4b158182da0ad877a" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;d09f6d0f9d4d19b4b158182da0ad877a&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;d09f6d0f9d4d19b4b158182da0ad877a&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;d09f6d0f9d4d19b4b158182da0ad877a&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pred09f6d0f9d4d19b4b158182da0ad877a">@startuml

skinparam class {
BackgroundColor PaleGreen
ArrowColor SeaGreen
BorderColor SpringGreen
}
skinparam stereotypeCBackgroundColor YellowGreen

类01 &#34;1&#34; *-- &#34;many&#34; 类02 : 包含

类03 o-- 类04 : 聚合

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="175" height="187" class="scale" src="../imgw/dark-d09f6d0f9d4d19b4b158182da0ad877a.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="89a4c54a52d87715"></a>
</p><div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish14 - incontent_14 -->
<span id="ezoic-pub-ad-placeholder-197"></span><!-- ezoic_pub_ad_placeholder-197-incontent_14-234x60-197-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-197-incontent_14-468x60-197-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-197-incontent_14-728x90-197-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-197-incontent_14-970x90-197-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish14 - incontent_14 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#30"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#30"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#30"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>模板样式</h2>
<p></p>
<p></p>
你可以给模型自定义颜色和字体(You can define specific color and fonts for stereotyped classes.)
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg2c24ecebe6515a5890a321a203c7d0e2" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img2c24ecebe6515a5890a321a203c7d0e2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;2c24ecebe6515a5890a321a203c7d0e2&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;2c24ecebe6515a5890a321a203c7d0e2&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;2c24ecebe6515a5890a321a203c7d0e2&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre2c24ecebe6515a5890a321a203c7d0e2">@startuml

skinparam class {
BackgroundColor PaleGreen
ArrowColor SeaGreen
BorderColor SpringGreen
BackgroundColor&lt;&lt;Foo&gt;&gt; Wheat
BorderColor&lt;&lt;Foo&gt;&gt; Tomato
}
skinparam stereotypeCBackgroundColor YellowGreen
skinparam stereotypeCBackgroundColor&lt;&lt; Foo &gt;&gt; DimGray

类1 &lt;&lt;Foo&gt;&gt;
类3 &lt;&lt;Foo&gt;&gt;
类1 &#34;1&#34; *-- &#34;*&#34; 类2 : 包含(contains)

类3 o-- 类4 : 聚合(aggregation)

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="260" height="262" class="scale" src="../imgw/dark-2c24ecebe6515a5890a321a203c7d0e2.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center>
<a style="position:relative;top:-38px;" name="cfe920390b501516"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#31"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#31"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#31"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>渐变颜色</h2>
<p></p>
你可以使用 # 号为类、注释等等自定义颜色。
<p></p>
在自定义颜色中你可以使用标准颜色的名称 或 RGB 编码，参见: <a href="https://plantuml.com/zh-dark/color">Colors</a>.
<p></p>
你同样可以使用下面的语法为背景色声明为渐变的颜色:
<p></p>
渐变的两个颜色可以使用下面的符号分割：
<ul>
<li><code class="cod">|</code>,</li>
<li><code class="cod">/</code>,</li>
<li><code class="cod">\</code>,</li>
<li><code class="cod">-</code>,</li>
</ul>
他们的区别在于颜色渐变的方向不同。
<p></p>
例如:
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgdf18ac52b0313cbd3fecd565a19c7600" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgdf18ac52b0313cbd3fecd565a19c7600" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;df18ac52b0313cbd3fecd565a19c7600&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;df18ac52b0313cbd3fecd565a19c7600&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;df18ac52b0313cbd3fecd565a19c7600&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="predf18ac52b0313cbd3fecd565a19c7600">@startuml

skinparam backgroundcolor AntiqueWhite/Gold
skinparam classBackgroundColor Wheat|CornflowerBlue

class 类1 #red-green
note left of 类1 #blue\9932CC
  这是foo类的
  渐变颜色
end note

package 包1 #GreenYellow/LightGoldenRodYellow {
  class 类2
}

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="296" height="112" class="scale" src="../imgw/dark-df18ac52b0313cbd3fecd565a19c7600.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="c08f8d9927fcb626"></a>
</p><div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish15 - incontent_15 -->
<span id="ezoic-pub-ad-placeholder-198"></span><!-- ezoic_pub_ad_placeholder-198-incontent_15-234x60-198-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-198-incontent_15-468x60-198-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-198-incontent_15-728x90-198-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-198-incontent_15-970x90-198-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish15 - incontent_15 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#32"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#32"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#32"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>辅助布局</h2>
<p></p>
有时候，默认布局并不完美...
<p></p>
你可以使用 <code class="cod">together</code> 关键词将某些类进行分组：
布局引擎会尝试将它们捆绑在一起（如同在一个包(package)内)
<p></p>
你也可以使用建立 <code class="cod">hidden</code> 链接的方式来强制布局
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg10f6027942c3aff56469c142c2c296d8" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img10f6027942c3aff56469c142c2c296d8" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;10f6027942c3aff56469c142c2c296d8&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;10f6027942c3aff56469c142c2c296d8&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;10f6027942c3aff56469c142c2c296d8&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre10f6027942c3aff56469c142c2c296d8">@startuml

class Bar1
class Bar2
together {
  class Together1
  class Together2
  class Together3
}
Together1 - Together2
Together2 - Together3
Together2 -[hidden]--&gt; Bar1
Bar1 -[hidden]&gt; Bar2


@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="377" height="230" class="scale" src="../imgw/dark-10f6027942c3aff56469c142c2c296d8.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="fc6a662f75b53104"></a>
</p><div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#33"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#33"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#33"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>拆分大文件</h2>
<p></p>
有些情况下，会有一些很大的图片文件。
<p></p>
可以用 <code class="cod">page (hpages)x(vpages)</code> 这个命令把生成的图片文件拆分成若干个文件。
<p></p>
<code class="cod">hpages</code> 用来表示水平方向页面数，
and <code class="cod">vpages</code> 用来表示垂直方面页面数。
<p></p>
你也可以使用特定的皮肤设定来给分页添加边框（见例子）
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg1159fb9c4b34e69b9d160fa18a5b8ab9" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img1159fb9c4b34e69b9d160fa18a5b8ab9" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;1159fb9c4b34e69b9d160fa18a5b8ab9&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;1159fb9c4b34e69b9d160fa18a5b8ab9&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;1159fb9c4b34e69b9d160fa18a5b8ab9&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre1159fb9c4b34e69b9d160fa18a5b8ab9">@startuml
&#39; Split into 4 pages
page 2x2
skinparam pageMargin 10
skinparam pageExternalColor gray
skinparam pageBorderColor black

class BaseClass

namespace net.dummy #DDDDDD {
    .BaseClass &lt;|-- Person
    Meeting o-- Person

    .BaseClass &lt;|- Meeting

}

namespace net.foo {
  net.dummy.Person  &lt;|- Person
  .BaseClass &lt;|-- Person

  net.dummy.Meeting o-- Person
}

BaseClass &lt;|-- net.unused.Person
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="441" height="356" class="scale" src="../imgw/dark-1159fb9c4b34e69b9d160fa18a5b8ab9.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<a style="position:relative;top:-38px;" name="6e0d446ea2c5bf82"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish16 - incontent_16 -->
<span id="ezoic-pub-ad-placeholder-199"></span><!-- ezoic_pub_ad_placeholder-199-incontent_16-234x60-199-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-199-incontent_16-468x60-199-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-199-incontent_16-728x90-199-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-199-incontent_16-970x90-199-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish16 - incontent_16 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#34"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#34"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#34"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>继承(Extends) 和 实现(implements)</h2>
<p></p>
同样可使用 <code class="cod">extends</code> 和 <code class="cod">implements</code> 关键词.
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgc67ae96bf8764499b822639d3feae97e" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgc67ae96bf8764499b822639d3feae97e" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;c67ae96bf8764499b822639d3feae97e&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;c67ae96bf8764499b822639d3feae97e&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;c67ae96bf8764499b822639d3feae97e&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prec67ae96bf8764499b822639d3feae97e">@startuml
class ArrayList implements List
class ArrayList extends AbstractList
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="208" height="169" class="scale" src="../imgw/dark-c67ae96bf8764499b822639d3feae97e.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="4ffca7d13182195f"></a>
</p><div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#35"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#35"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#35"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>方括号表示关系(连接或箭头)的样式 </h2>
<p></p>
<h3>线样式</h3>
<p></p>
可以明确的使用 <code class="cod">bold</code>, <code class="cod">dashed</code>, <code class="cod">dotted</code>, <code class="cod">hidden</code> 或 <code class="cod">plain</code> 来表示关系, 连接或箭头:<br/>
<p></p>
<ul>
<li>没有标签</li>
</ul>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgf92cc0bd18f2c610669ad944ea08857a" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgf92cc0bd18f2c610669ad944ea08857a" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f92cc0bd18f2c610669ad944ea08857a&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f92cc0bd18f2c610669ad944ea08857a&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;f92cc0bd18f2c610669ad944ea08857a&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pref92cc0bd18f2c610669ad944ea08857a">@startuml
title 使用方括号([])表示的线样式（无标签版）

class foo类
class bar类
bar类1 : [bold]  
bar类2 : [dashed]
bar类3 : [dotted]
bar类4 : [hidden]
bar类5 : [plain] 

foo类 --&gt; bar类
foo类 -[bold]-&gt; bar类1
foo类 -[dashed]-&gt; bar类2
foo类 -[dotted]-&gt; bar类3
foo类 -[hidden]-&gt; bar类4
foo类 -[plain]-&gt; bar类5
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="630" height="225" class="scale" src="../imgw/dark-f92cc0bd18f2c610669ad944ea08857a.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<ul>
<li>有标签</li>
</ul>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg7ea726f86ea64942cd029b44af50b24c" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img7ea726f86ea64942cd029b44af50b24c" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;7ea726f86ea64942cd029b44af50b24c&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;7ea726f86ea64942cd029b44af50b24c&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;7ea726f86ea64942cd029b44af50b24c&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre7ea726f86ea64942cd029b44af50b24c">@startuml
title 使用方括号([])表示的线样式（有标签版）

class foo类
class bar类
bar类1 : [bold]  
bar类2 : [dashed]
bar类3 : [dotted]
bar类4 : [hidden]
bar类5 : [plain] 

foo类 --&gt; bar类          : ∅
foo类 -[bold]-&gt; bar类1   : [bold]
foo类 -[dashed]-&gt; bar类2 : [dashed]
foo类 -[dotted]-&gt; bar类3 : [dotted]
foo类 -[hidden]-&gt; bar类4 : [hidden]
foo类 -[plain]-&gt; bar类5  : [plain]
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="630" height="243" class="scale" src="../imgw/dark-7ea726f86ea64942cd029b44af50b24c.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[改编自 <a href="https://forum.plantuml.net/4181/how-change-width-line-in-a-relationship-between-two-classes?show=4232#a4232">QA-4181</a>]</em>
<p></p>
<h3>线颜色</h3>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgbb7b7fcf7bd941aee621fd6dc6e7d6d6" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgbb7b7fcf7bd941aee621fd6dc6e7d6d6" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;bb7b7fcf7bd941aee621fd6dc6e7d6d6&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;bb7b7fcf7bd941aee621fd6dc6e7d6d6&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;bb7b7fcf7bd941aee621fd6dc6e7d6d6&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prebb7b7fcf7bd941aee621fd6dc6e7d6d6">@startuml
title 使用方括号([])表示的线颜色
class foo类
class bar类
bar类1 : [#red]
bar类2 : [#green]
bar类3 : [#blue]

foo类 --&gt; bar类
foo类 -[#red]-&gt; bar类1     : [#red]
foo类 -[#green]-&gt; bar类2   : [#green]
foo类 -[#blue]-&gt; bar类3    : [#blue]
&#39;foo类 -[#blue;#yellow;#green]-&gt; bar类4
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="410" height="243" class="scale" src="../imgw/dark-bb7b7fcf7bd941aee621fd6dc6e7d6d6.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<h3>线宽度</h3>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg382854876cbf5fc9c14486afbf5f4613" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img382854876cbf5fc9c14486afbf5f4613" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;382854876cbf5fc9c14486afbf5f4613&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;382854876cbf5fc9c14486afbf5f4613&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;382854876cbf5fc9c14486afbf5f4613&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre382854876cbf5fc9c14486afbf5f4613">@startuml
title 使用方括号([])表示的线宽度
class foo类
class bar类
bar类1 : [thickness=1]
bar类2 : [thickness=2]
bar类3 : [thickness=4]
bar类4 : [thickness=8]
bar类5 : [thickness=16]

foo类 --&gt; bar类                 : ∅
foo类 -[thickness=1]-&gt; bar类1   : [1]
foo类 -[thickness=2]-&gt; bar类2   : [2]
foo类 -[thickness=4]-&gt; bar类3   : [4]
foo类 -[thickness=8]-&gt; bar类4   : [8]
foo类 -[thickness=16]-&gt; bar类5  : [16]

@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="738" height="243" class="scale" src="../imgw/dark-382854876cbf5fc9c14486afbf5f4613.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[参考: <a href="https://forum.plantuml.net/4949">QA-4949</a>]</em>
<p></p>
<h3>混合样式</h3>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg85ae38aa4dfa1beb4ade7e93083c4f5c" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img85ae38aa4dfa1beb4ade7e93083c4f5c" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;85ae38aa4dfa1beb4ade7e93083c4f5c&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;85ae38aa4dfa1beb4ade7e93083c4f5c&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;85ae38aa4dfa1beb4ade7e93083c4f5c&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre85ae38aa4dfa1beb4ade7e93083c4f5c">@startuml
title 使用方括号([])表示的线混合样式
class foo类
class bar类
bar类1 : [#red,thickness=1]
bar类2 : [#red,dashed,thickness=2]
bar类3 : [#green,dashed,thickness=4]
bar类4 : [#blue,dotted,thickness=8]
bar类5 : [#blue,plain,thickness=16]

foo类 --&gt; bar类                             : ∅
foo类 -[#red,thickness=1]-&gt; bar类1          : [#red,1]
foo类 -[#red,dashed,thickness=2]-&gt; bar类2   : [#red,dashed,2]
foo类 -[#green,dashed,thickness=4]-&gt; bar类3 : [#green,dashed,4]
foo类 -[#blue,dotted,thickness=8]-&gt; bar类4  : [blue,dotted,8]
foo类 -[#blue,plain,thickness=16]-&gt; bar类5  : [blue,plain,16]
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="1112" height="243" class="scale" src="../imgw/dark-85ae38aa4dfa1beb4ade7e93083c4f5c.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
<a style="position:relative;top:-38px;" name="8dfb3b05fc895d2b"></a>
</p><div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish17 - incontent_17 -->
<span id="ezoic-pub-ad-placeholder-600"></span><!-- ezoic_pub_ad_placeholder-600-incontent_17-234x60-600-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-600-incontent_17-468x60-600-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-600-incontent_17-728x90-600-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-600-incontent_17-970x90-600-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish17 - incontent_17 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#36"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#36"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#36"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>改变关系(线和箭头)的颜色和样式(单行样式)</h2>
<p></p>
你可以改变表示关系的线和箭头的<a href="https://plantuml.com/zh-dark/color">颜色</a>或样式，使用下面的单行样式格式：
<p></p>
<ul>
<li><code class="cod">#color;line.[bold|dashed|dotted];text:color</code></li>
</ul>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg3a3b605021e39378347b2fa0ceb5f7c0" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img3a3b605021e39378347b2fa0ceb5f7c0" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;3a3b605021e39378347b2fa0ceb5f7c0&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;3a3b605021e39378347b2fa0ceb5f7c0&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;3a3b605021e39378347b2fa0ceb5f7c0&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre3a3b605021e39378347b2fa0ceb5f7c0">@startuml
class foo类
foo类 --&gt; bar类 : 默认
foo类 --&gt; bar类1 #line:red;line.bold;text:red  : 红色粗线
foo类 --&gt; bar类2 #green;line.dashed;text:green : 绿色断线
foo类 --&gt; bar类3 #blue;line.dotted;text:blue   : 蓝色点线
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="410" height="187" class="scale" src="../imgw/dark-3a3b605021e39378347b2fa0ceb5f7c0.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[See similar feature on <a href="deployment-diagram.html#0b2e57c3d4eafdda">deployment</a>]</em>
<a style="position:relative;top:-38px;" name="fab0ecfcfd0af288"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#37"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#37"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#37"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>改变类颜色和样式 (单行样式)</h2>
<p></p>
你可以改变定义类的 <a href="https://plantuml.com/zh-dark/color">颜色</a> 或样式， 通过下面两种指定格式:
<p></p>
<ul>
<li><code class="cod">#color ##[style]color</code> </li>
</ul>
<p></p>
第一个颜色(<code class="cod">#color</code>)表示背景色，然后第二个表示线的样式和颜色(<code class="cod">##[style]color</code>)
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg1ce85e779d803a57948294b6dab8ebd8" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img1ce85e779d803a57948294b6dab8ebd8" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;1ce85e779d803a57948294b6dab8ebd8&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;1ce85e779d803a57948294b6dab8ebd8&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;1ce85e779d803a57948294b6dab8ebd8&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre1ce85e779d803a57948294b6dab8ebd8">@startuml
abstract   抽象类
annotation 标注     #pink ##[bold]red
class      类      #palegreen ##[dashed]green
interface  接口    #aliceblue ##[dotted]blue
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="182" height="169" class="scale" src="../imgw/dark-1ce85e779d803a57948294b6dab8ebd8.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[参考: <a href="https://forum.plantuml.net/1487">QA-1487</a>]</em>
<p></p>
<ul>
<li><code class="cod">#[color|back:color];header:color;line:color;line.[bold|dashed|dotted];text:color</code></li>
</ul>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgee11f7bfa01d02d41cb289c4a08b0737" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgee11f7bfa01d02d41cb289c4a08b0737" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;ee11f7bfa01d02d41cb289c4a08b0737&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;ee11f7bfa01d02d41cb289c4a08b0737&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;ee11f7bfa01d02d41cb289c4a08b0737&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preee11f7bfa01d02d41cb289c4a08b0737">@startuml
abstract   抽象类
annotation 标注     #pink;line:red;line.bold;text:red
class      类      #palegreen;line:green;line.dashed;text:green
interface  接口    #aliceblue;line:blue;line.dotted;text:blue
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="182" height="169" class="scale" src="../imgw/dark-ee11f7bfa01d02d41cb289c4a08b0737.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
第一个原始示例:
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgda6a549bcbe11f42d0b20eb6a343c55a" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgda6a549bcbe11f42d0b20eb6a343c55a" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;da6a549bcbe11f42d0b20eb6a343c55a&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;da6a549bcbe11f42d0b20eb6a343c55a&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;da6a549bcbe11f42d0b20eb6a343c55a&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preda6a549bcbe11f42d0b20eb6a343c55a">@startuml
class bar类 #line:green;back:lightblue
class bar类2 #lightblue;line:green

class Foo类1 #back:red;line:00FFFF
class Foo类Dashed #line.dashed:blue
class Foo类Dotted #line.dotted:blue
class Foo类Bold #line.bold
class Demo类1 #back:lightgreen|yellow;header:blue/red
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="415" height="277" class="scale" src="../imgw/dark-da6a549bcbe11f42d0b20eb6a343c55a.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[参考. <a href="https://forum.plantuml.net/3770">QA-3770</a>]</em>
<a style="position:relative;top:-38px;" name="4829cb0f596c9350"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish18 - incontent_18 -->
<span id="ezoic-pub-ad-placeholder-601"></span><!-- ezoic_pub_ad_placeholder-601-incontent_18-234x60-601-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-601-incontent_18-468x60-601-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-601-incontent_18-728x90-601-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-601-incontent_18-970x90-601-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish18 - incontent_18 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#38"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#38"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#38"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>类成员的箭头方向(Arrows from/to class members)</h2>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg3b62079488b1aae619292a2eaef561cf" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img3b62079488b1aae619292a2eaef561cf" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;3b62079488b1aae619292a2eaef561cf&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;3b62079488b1aae619292a2eaef561cf&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;3b62079488b1aae619292a2eaef561cf&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre3b62079488b1aae619292a2eaef561cf">@startuml
class Foo类 {
+ 字段1
+ 字段2
}

class Bar类 {
+ 字段3
+ 字段4
}

Foo类::字段1 --&gt; Bar类::字段3 : foo
Foo类::字段2 --&gt; Bar类::字段4 : bar
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="211" height="265" class="scale" src="../imgw/dark-3b62079488b1aae619292a2eaef561cf.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[参考: <a href="https://forum.plantuml.net/3636">QA-3636</a>]</em>
<p></p>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgfba0329962bbee4e38c3493eb6146b43" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgfba0329962bbee4e38c3493eb6146b43" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;fba0329962bbee4e38c3493eb6146b43&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;fba0329962bbee4e38c3493eb6146b43&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;fba0329962bbee4e38c3493eb6146b43&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="prefba0329962bbee4e38c3493eb6146b43">@startuml
left to right direction

class User类 {
  id : INTEGER
  ..
  其他id : INTEGER
}

class Email类 {
  id : INTEGER
  ..
  用户_id : INTEGER
  地址 : STRING
}

User类::id *-- Email类::用户_id
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="343" height="120" class="scale" src="../imgw/dark-fba0329962bbee4e38c3493eb6146b43.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[参考: <a href="https://forum.plantuml.net/5261">QA-5261</a>]</em>
<a style="position:relative;top:-38px;" name="49b7759afaffc066"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#39"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#39"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#39"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>分组继承关系(Grouping inheritance arrow heads)</h2>
<p></p>
你可以用<code class="cod">skinparam groupInheritance</code>关键字合并泛化箭头, 后接参数合并阈值(从几个继承类时开始合并)。
<p></p>
<h3>GroupInheritance 1 (不合并)</h3>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msge2cca002d49b986caca1d83218c502f6" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imge2cca002d49b986caca1d83218c502f6" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;e2cca002d49b986caca1d83218c502f6&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;e2cca002d49b986caca1d83218c502f6&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;e2cca002d49b986caca1d83218c502f6&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pree2cca002d49b986caca1d83218c502f6">@startuml
skinparam groupInheritance 1

A1 &lt;|-- B1

A2 &lt;|-- B2
A2 &lt;|-- C2

A3 &lt;|-- B3
A3 &lt;|-- C3
A3 &lt;|-- D3

A4 &lt;|-- B4
A4 &lt;|-- C4
A4 &lt;|-- D4
A4 &lt;|-- E4
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="826" height="169" class="scale" src="../imgw/dark-e2cca002d49b986caca1d83218c502f6.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<h3>GroupInheritance 2 (从2个组开始合并)</h3>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg5768232f069c92ba3b5bd6556d07bf8d" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img5768232f069c92ba3b5bd6556d07bf8d" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;5768232f069c92ba3b5bd6556d07bf8d&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;5768232f069c92ba3b5bd6556d07bf8d&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;5768232f069c92ba3b5bd6556d07bf8d&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre5768232f069c92ba3b5bd6556d07bf8d">@startuml
skinparam groupInheritance 2

A1 &lt;|-- B1

A2 &lt;|-- B2
A2 &lt;|-- C2

A3 &lt;|-- B3
A3 &lt;|-- C3
A3 &lt;|-- D3

A4 &lt;|-- B4
A4 &lt;|-- C4
A4 &lt;|-- D4
A4 &lt;|-- E4
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="826" height="189" class="scale" src="../imgw/dark-5768232f069c92ba3b5bd6556d07bf8d.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<h3>GroupInheritance 3 (从3个组开始合并)</h3>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg72d5ced365ade12444c66254a530c6f2" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img72d5ced365ade12444c66254a530c6f2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;72d5ced365ade12444c66254a530c6f2&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;72d5ced365ade12444c66254a530c6f2&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;72d5ced365ade12444c66254a530c6f2&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre72d5ced365ade12444c66254a530c6f2">@startuml
skinparam groupInheritance 3

A1 &lt;|-- B1

A2 &lt;|-- B2
A2 &lt;|-- C2

A3 &lt;|-- B3
A3 &lt;|-- C3
A3 &lt;|-- D3

A4 &lt;|-- B4
A4 &lt;|-- C4
A4 &lt;|-- D4
A4 &lt;|-- E4
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="826" height="189" class="scale" src="../imgw/dark-72d5ced365ade12444c66254a530c6f2.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<h3>GroupInheritance 4 (从4个组开始合并)</h3>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgeda220ee6ba7688d727ff18c073d8b15" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgeda220ee6ba7688d727ff18c073d8b15" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;eda220ee6ba7688d727ff18c073d8b15&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;eda220ee6ba7688d727ff18c073d8b15&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;eda220ee6ba7688d727ff18c073d8b15&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preeda220ee6ba7688d727ff18c073d8b15">@startuml
skinparam groupInheritance 4

A1 &lt;|-- B1

A2 &lt;|-- B2
A2 &lt;|-- C2

A3 &lt;|-- B3
A3 &lt;|-- C3
A3 &lt;|-- D3

A4 &lt;|-- B4
A4 &lt;|-- C4
A4 &lt;|-- D4
A4 &lt;|-- E4
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="826" height="189" class="scale" src="../imgw/dark-eda220ee6ba7688d727ff18c073d8b15.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[参考: <a href="https://forum.plantuml.net/3193/grouping-inheritance-arrow-ends">QA-3193</a>, 和 <a href="https://forum.plantuml.net/13532/groupinheritance-bug">QA-13532</a>]</em>
<a style="position:relative;top:-38px;" name="a3e433077b7a6be8"></a>
<div style="clear:both;min-height:110px;margin-top:10px;">

<div class="pezoic">
<!-- Ezoic - Fish19 - incontent_19 -->
<span id="ezoic-pub-ad-placeholder-602"></span><!-- ezoic_pub_ad_placeholder-602-incontent_19-234x60-602-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-602-incontent_19-468x60-602-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-602-incontent_19-728x90-602-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-602-incontent_19-970x90-602-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Fish19 - incontent_19 -->
</div>

</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#40"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#40"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#40"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Display JSON Data on Class or Object diagram</h2>
<p></p>
<h3>Simple example</h3>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg09ab23cd01ddc8e4332d303870001a86" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img09ab23cd01ddc8e4332d303870001a86" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;09ab23cd01ddc8e4332d303870001a86&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;09ab23cd01ddc8e4332d303870001a86&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;09ab23cd01ddc8e4332d303870001a86&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre09ab23cd01ddc8e4332d303870001a86">@startuml
class Class
object Object
json JSON {
   &#34;fruit&#34;:&#34;Apple&#34;,
   &#34;size&#34;:&#34;Large&#34;,
   &#34;color&#34;: [&#34;Red&#34;, &#34;Green&#34;]
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="181" height="233" class="scale" src="../imgw/dark-09ab23cd01ddc8e4332d303870001a86.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[Ref. <a href="https://forum.plantuml.net/15481/possible-link-elements-from-two-jsons-with-both-jsons-embeded?show=15567#c15567">QA-15481</a>]</em>
<p></p>
For another example, see on <a href="json.html#jinnkhaa7d65l0fkhfec">JSON page</a>.
<a style="position:relative;top:-38px;" name="dbeeec19b401ede6"></a>
<div style="clear:both;height:50px;">
</div>
<!--heading--><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/zh/class-diagram#41"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/zh/class-diagram#41"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/zh/class-diagram#41"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Packages and Namespaces Enhancement</h2>
<p></p>
<em>[From V1.2023.2+, and V1.2023.5]</em>
<p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg20e3b98a6b7ebb5585ab6ad0eb812c8d" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img20e3b98a6b7ebb5585ab6ad0eb812c8d" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;20e3b98a6b7ebb5585ab6ad0eb812c8d&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;20e3b98a6b7ebb5585ab6ad0eb812c8d&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;20e3b98a6b7ebb5585ab6ad0eb812c8d&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre20e3b98a6b7ebb5585ab6ad0eb812c8d">@startuml
class A.B.C.D.Z {
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="228" height="316" class="scale" src="../imgw/dark-20e3b98a6b7ebb5585ab6ad0eb812c8d.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg2625df89c9a9306e7453ac0d6db33a4c" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img2625df89c9a9306e7453ac0d6db33a4c" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;2625df89c9a9306e7453ac0d6db33a4c&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;2625df89c9a9306e7453ac0d6db33a4c&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;2625df89c9a9306e7453ac0d6db33a4c&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre2625df89c9a9306e7453ac0d6db33a4c">@startuml
set separator none
class A.B.C.D.Z {
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="114" height="68" class="scale" src="../imgw/dark-2625df89c9a9306e7453ac0d6db33a4c.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msgb87e252c41258d89e58a062bdf8593c3" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="imgb87e252c41258d89e58a062bdf8593c3" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;b87e252c41258d89e58a062bdf8593c3&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;b87e252c41258d89e58a062bdf8593c3&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;b87e252c41258d89e58a062bdf8593c3&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="preb87e252c41258d89e58a062bdf8593c3">@startuml
!pragma useIntermediatePackages false
class A.B.C.D.Z {
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="84" height="112" class="scale" src="../imgw/dark-b87e252c41258d89e58a062bdf8593c3.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<p>
<table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td valign="top">
<div id="msg73a7b2d91d5924d4a646f2070e5ad9c9" class="msg">
🎉 Copied!
</div>
<img loading="lazy" width="16" height="16" id="img73a7b2d91d5924d4a646f2070e5ad9c9" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;73a7b2d91d5924d4a646f2070e5ad9c9&#39;)"/>
<br/>
<img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;73a7b2d91d5924d4a646f2070e5ad9c9&#39;)"/>
</td>
<td>
<div class="mytab" onclick="javascript:ljs(&#39;73a7b2d91d5924d4a646f2070e5ad9c9&#39;)">
<div class="mycell0">
<code onmouseover="az=1" onmouseout="az=0"><pre id="pre73a7b2d91d5924d4a646f2070e5ad9c9">@startuml
set separator none
package A.B.C.D {
  class Z {
  }
}
@enduml
</pre></code>
</div>
<div class="mycell">
<img loading="lazy" width="84" height="112" class="scale" src="../imgw/dark-73a7b2d91d5924d4a646f2070e5ad9c9.png"/>
</div>
</div>
</td>
</tr>
</tbody></table>
</p><p>
</p><p></p>
<em>[Ref. <a href="https://github.com/plantuml/plantuml/issues/1352">GH-1352</a>]</em>
</td>
<td id="toctd" valign="top" style="max-width:240px;min-width:240px;">
<!--toc-->
<div id="toc">
<ul>
<li><a href="class-diagram.html#e5cec68ef9127fc4">元素声明</a>
</li><li><a href="class-diagram.html#9dd2a6eca0c2a0e7">类之间的关系</a>
</li><li><a href="class-diagram.html#4a705b44651caa59">关系上的标签</a>
</li><li><a href="class-diagram.html#bd62ba9333d08763">在元素名称和关系标签中使用非字母</a>
</li><li><a href="class-diagram.html#090967fbee930909">添加方法</a>
</li><li><a href="class-diagram.html#3644720244dd6c6a">定义能见度(可访问性)</a>
</li><li><a href="class-diagram.html#9fd9d25be2fbb118">抽象与静态</a>
</li><li><a href="class-diagram.html#08ca680401eefe3a">高级类体</a>
</li><li><a href="class-diagram.html#59c91a18bcc97bb0">备注和版型</a>
</li><li><a href="class-diagram.html#23ca7846dedbb80a">备注中的更多功能</a>
</li><li><a href="class-diagram.html#c909b0b5f0434a64">注释属性 (field, attribute, member) 或方法</a>
</li><li><a href="class-diagram.html#1d010d898a1fead2">链接的注释</a>
</li><li><a href="class-diagram.html#a339d3559f33ad64">抽象类和接口</a>
</li><li><a href="class-diagram.html#6a8ec84e53ede3ae">隐藏属性、函数等</a>
</li><li><a href="class-diagram.html#20ec7d48c223b142">隐藏类</a>
</li><li><a href="class-diagram.html#3efa75742a5e3384">删除类</a>
</li><li><a href="class-diagram.html#c0ef243486e3ad85">Hide, Remove or Restore tagged element or wildcard</a>
</li><li><a href="class-diagram.html#382f74cc79c4edbc">隐藏或删除未关联的类</a>
</li><li><a href="class-diagram.html#b09695ba6d76313d">泛型（generics）</a>
</li><li><a href="class-diagram.html#4b62dd14f1d33739">指定标记（Spot）</a>
</li><li><a href="class-diagram.html#27fe4eb3edbaff8f">包</a>
</li><li><a href="class-diagram.html#a05971470d7fd711">包样式</a>
</li><li><a href="class-diagram.html#13d28e8dfc702e34">命名空间（Namespaces）</a>
</li><li><a href="class-diagram.html#0d2504841361d7da">自动创建命名空间</a>
</li><li><a href="class-diagram.html#8b64d7547fa4f699">棒棒糖接口</a>
</li><li><a href="class-diagram.html#5a6e75f1261e3d91">改变箭头方向</a>
</li><li><a href="class-diagram.html#fbbc0504d940020e">“关系”类</a>
</li><li><a href="class-diagram.html#43980c266e3ad62c">同级关联(Association on same classe)</a>
</li><li><a href="class-diagram.html#7aa53dbdfc2137bf">样式参数</a>
</li><li><a href="class-diagram.html#89a4c54a52d87715">模板样式</a>
</li><li><a href="class-diagram.html#cfe920390b501516">渐变颜色</a>
</li><li><a href="class-diagram.html#c08f8d9927fcb626">辅助布局</a>
</li><li><a href="class-diagram.html#fc6a662f75b53104">拆分大文件</a>
</li><li><a href="class-diagram.html#6e0d446ea2c5bf82">继承(Extends) 和 实现(implements)</a>
</li><li><a href="class-diagram.html#4ffca7d13182195f">方括号表示关系(连接或箭头)的样式</a>
</li><li><a href="class-diagram.html#8dfb3b05fc895d2b">改变关系(线和箭头)的颜色和样式(单行样式)</a>
</li><li><a href="class-diagram.html#fab0ecfcfd0af288">改变类颜色和样式 (单行样式)</a>
</li><li><a href="class-diagram.html#4829cb0f596c9350">类成员的箭头方向(Arrows from/to class members)</a>
</li><li><a href="class-diagram.html#49b7759afaffc066">分组继承关系(Grouping inheritance arrow heads)</a>
</li><li><a href="class-diagram.html#a3e433077b7a6be8">Display JSON Data on Class or Object diagram</a>
</li><li><a href="class-diagram.html#dbeeec19b401ede6">Packages and Namespaces Enhancement</a>
</li></ul>
</div>
</td>
</tr>
</tbody></table>


</p><p>

<!-- Ezoic - Natif02L - bottom_of_page -->
</p><span id="ezoic-pub-ad-placeholder-104"></span><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-234x60-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-468x60-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-728x90-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-970x250-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-300x250x3-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-970x90-104-nonexxxnonexxxxxxezmaxscaleval100 -->
<!-- End Ezoic - Natif02L - bottom_of_page -->
</div>
<!-- https://css-tricks.com/almanac/properties/f/float/ -->
<!-- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -->


<style>
.btm {
text-align:center;
}
.btm a{
    text-decoration:none;
    color:#b0c0d0;
}
.btm a:hover{
    color:#8CB4FF;
}
</style>

<div class="btm">
<hr/>
<a href="https://g.ezoic.net/privacy/plantuml.com"><small>Privacy Policy</small></a>
    
<a href="../direct-sales.html"><small>Advertise</small></a>
<p>
</p></div><!--btm-->


<!--root-->

<!-- Start of StatCounter Code --><script type="text/javascript">
var sc_project=11129481; var sc_invisible=1; var sc_security="bd89fcfd";
</script>
<script async="" type="text/javascript" src="https://www.statcounter.com/counter/counter.js"></script> <!-- End of StatCounter Code -->


<!--[selectrongo:done]--><script type="text/javascript">
				var __inScopeForCCPA = false;
		function __uspapi(command, version, callback) {
			var response = null;
			var successs = false;
			if (command === "getUSPData" && version === 1) {
				var uspString = "1"; // Version
				if (__inScopeForCCPA) {
					uspString += "N"; // Has Explicit Notice for Opt Out been provided (ex footer or minor consent modal)
					var result;
					var consentCookie = (result = new RegExp('(?:^|; )ezoccpaconsent=([^;]*)').exec(document.cookie)) ? (result[1]) : null;
					if (consentCookie === "nonconsent") {
						uspString += "Y";
					}
					else {
						uspString += "N";
					}
					uspString += "N" // Is pub a signatory to the IAB Limited Service Provider Agreement (http://www.iabprivacy.com/)
				}
				else {
					uspString += "---";
				}
				response = {
					uspString: uspString,
					version: 1
				};
				success = true;
			}
			return callback(response, success);
		};
		function __receiveUspapiMessage(event) {
			if (event.data.hasOwnProperty('__uspapiCall')) {
				__uspapi('getUSPData', 1, function(uspData, success) {
					event.source.postMessage({
						__uspapiReturn: {
							returnValue: uspData,
							success: success,
							callId: event.data.__uspapiCall.callId
						}
					},
					event.origin);
				});
			}
			return null;
		};
		window.addEventListener("message", __receiveUspapiMessage, false);
</script>
<script>__ez.queue.addFile('/tardisrocinante/vitals.js', '/tardisrocinante/vitals.js?gcb=2&cb=3', false, ['/parsonsmaize/mulvane.js'], true, false, true, false);</script>
<script>var _audins_dom="plantuml_com",_audins_did=173770;__ez.queue.addDelayFunc("audins.js","__ez.script.add", "//go.ezodn.com/detroitchicago/audins.js?cb=195-2");</script><noscript><div style="display:none;"><img src="https://pixel.quantserve.com/pixel/p-31iz6hfFutd16.gif?labels=Domain.plantuml_com,DomainId.173770" border="0" height="1" width="1" alt="Quantcast"/></div></noscript>
<script>__ez.queue.addFile('/beardeddragon/drake.js', '/beardeddragon/drake.js?gcb=2&cb=4', false, [], true, false, true, false);</script>
<script type="text/javascript" style='display:none;'>var __ez_dims = (function() {
		var setCookie = function( name, content, expiry ) {
			return document.cookie = name+'='+content+((expiry)?';expires='+(new Date(Math.floor(new Date().getTime()+expiry*1000)).toUTCString()):'')+';path=/';
		};
		var ffid = 1;
		var oh = window.screen.height;
		var ow = window.screen.width;
		var h = ffid === 1 ? oh : (oh > ow) ? oh : ow;
		var w = ffid === 1 ? ow : (oh > ow) ? ow : oh;
		var uh = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
		var uw = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
		setCookie('ezds', encodeURIComponent('ffid='+ffid+',w='+w+',h='+h), (31536e3*7));
		setCookie('ezohw', encodeURIComponent('w='+uw+',h='+uh), (31536e3*7));
	})();</script>
<script type='text/javascript' style='display:none;' async>__ez.queue.addFile('/parsonsmaize/chanute.js', '/parsonsmaize/chanute.js?a=a&cb=7&dcb=195-2&shcb=34', true, ['/parsonsmaize/mulvane.js'], true, false, false, false);</script>
<script type='text/javascript' style='display:none;' async>__ez.queue.addFile('/porpoiseant/jellyfish.js', '/porpoiseant/jellyfish.js?a=a&cb=10&dcb=195-2&shcb=34', false, [], true, false, false, false);</script></body></html>